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

Question

我有一个 React 组件，它呈现一个<Link/>.

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');
});

注：stubRouterContext是阵营，路由器v0.13.3必要嘲笑<Link/>正确。

编辑：

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

Answer 1

我使用笑话和酶进行测试。对于来自路由的链接，我使用他们官方文档中的内存路由器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);
});

它一直就在我面前。