React-Router：如何测试渲染的 Link 的 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');
});

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

编辑：

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

Answer 1

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

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

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

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

我用jest和enzyme来测试。对于 Route 中的 Link，我使用官方文档中的 Memory Router https://reacttraining.com/react-router/web/guides/testing

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

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：如何测试渲染的 Link 的 href？

React-Router: How to test href of a rendered Link?

javascript

mocha.js

reactjs

react-router

编辑：