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/>的方式有关，但如何“修复”仍然是TBD ......

Answer 1

确定。这只是挖掘了我已经拥有的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 2

您可以使用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');

Answer 3

我用jest和酶进行测试。对于来自路线的链接，我们使用官方文档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);
  });

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

编辑：

3 个答案: