如何在 React 0.14 的单元测试中检查 DOM 节点的props?

IT技术 unit-testing reactjs
2021-04-15 04:07:01

将 React 从 升级0.13到 后v0.14.0-beta3,我在单元测试中收到了很多这样的警告:

Warning: ReactDOMComponent: Do not access .props of a DOM node; instead, recreate the props as `render` did originally or read the DOM properties/attributes directly from this node (e.g., this.refs.box.className). This DOM node was rendered by `Button`.

它们是由我的单元测试引起的,例如:

it('should render to a <a> when href is given', function () {
    var button = TestUtils.renderIntoDocument(<Button className="amazon" href="#">Hello</Button>);
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'button').length).toBe(0);
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'a').length).toBe(1);
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'a')[0].props.href).toBe('#');
    expect(TestUtils.scryRenderedDOMComponentsWithTag(button, 'a')[0].props.className).toBe('amazon Button');
});

我该如何解决?是否有任何推荐的做法来测试这样的 DOM 元素?

2个回答

在调试器中,我发现这些元素(比如,在我的例子中,TestUtils.scryRenderedDOMComponentsWithTag(button, 'a')[0])实际上是 DOM 元素,只是添加了一些 React 属性(比如propsstate)。

调试器

所以现在,有了这些知识,我可以根据 DOM 属性和属性编写断言,例如:

expect(b.getAttribute('href')).toEqual('#');
不,您的解决方案是正确的!我只是说他们不会在未来的版本中添加 React 属性——这就是为什么你现在在使用这些属性时会收到警告。
2021-05-25 04:07:01
DOM 节点上的 .props 等仅作为迁移​​辅助存在,将在 0.15 中删除。
2021-05-30 04:07:01
感谢您的信息。那么你有替代的解决方案吗?
2021-06-07 04:07:01

要修复警告,只需直接调用props即可。例如:

警告代码:

this.refs.input.props.name

固定代码:

this.refs.input.name