React-Router：如何测试渲染链接的href？

Question

我有一个渲染 <Link/> 的 React 组件。

render: function () {
    var record = this.props.record;
    return (
        <Link to="record.detail" params={{id:record.id}}>
            <div>ID: {record.id}</div>
            <div>Name: {record.name}</div>
            <div>Status: {record.status}</div>
        </Link>
    );
}

我可以轻松获得渲染后的<a/>，但我不确定如何测试 href 是否正确构建。

function mockRecordListItem(record) {
    return stubRouterContext(require('./RecordListItem.jsx'), {record: record});
}
it('should handle click', function () {
    let record = {id: 2, name: 'test', status: 'completed'};
    var RecordListItem = mockRecordListItem(record);
    let item = TestUtils.renderIntoDocument(<RecordListItem/>);

    let a = TestUtils.findRenderedDOMComponentWithTag(item, 'a');
    expect(a);

    // TODO: inspect href?
    expect(/* something */).to.equal('/records/2');
});

注意：在 React-Router v0.13.3 中，stubRouterContext 是正确模拟 <Link/> 所必需的。

编辑：

感谢Jordan 建议a.getDOMNode().getAttribute('href')。不幸的是，当我运行测试时，结果是null。我预计这与stubRouterContext 嘲笑<Link/> 的方式有关，但如何“修复”仍待定......

Answer 1

我使用 jest 和酵素进行测试。对于来自 Route 的链接，我使用他们官方文档中的 Memory Router https://reacttraining.com/react-router/web/guides/testing

我需要检查最终构造链接的href。这是我的建议：

MovieCard.js：

export function MovieCard(props) {
  const { id, type } = props;
  return (
    <Link to={`/${type}/${id}`} className={css.card} />
  )
};

MovieCard.test.js（我在这里跳过导入）：

const id= 111;
const type= "movie";

test("constructs link for router", () => {
    const wrapper = mount(
      <MemoryRouter>
        <MovieCard type={type} id={id}/>
      </MemoryRouter>
    );

    expect(wrapper.find('[href="/movie/111"]').length).toBe(1);
  });

Answer 2

好的。这只是对我已经拥有的stubRouterContext 进行了一些挖掘。

第三个构造函数参数stubs是我需要传入的，它覆盖了默认的makeHref函数。

工作示例：

function mockRecordListItem(record, stubs) {
    return stubRouterContext(require('./RecordListItem.jsx'), {record: record}, stubs);
}
it('should handle click', function () {
    let record = {id: 2, name: 'test', status: 'completed'};
    let expectedRoute = '/records/2';
    let RecordListItem = mockRecordListItem(record, {
        makeHref: function () {
            return expectedRoute;
        }
    });
    let item = TestUtils.renderIntoDocument(<RecordListItem/>);
    let a = TestUtils.findRenderedDOMComponentWithTag(item, 'a');
    expect(a);

    let href = a.getDOMNode().getAttribute('href');
    expect(href).to.equal(expectedRoute);
});

它一直就在我面前。

Answer 3

您可以使用a.getDOMNode() 获取a 组件的DOM 节点，然后对其使用常规的DOM 节点方法。在这种情况下，getAttribute('href') 将返回 href 属性的值：

let a = TestUtils.findRenderedDOMComponentWithTag(item, 'a');
let domNode = a.getDOMNode();

expect(domNode.getAttribute('href')).to.equal('/records/2');