Question

我正在使用Jest测试React组件的表单输入，但是我无法找到使用React TestUtils选择表单输入字段的最佳方法。在线文档显示了使用refs的示例，但React文档还声明refs应仅用于父组件而不是组件的子组件。我应该将refs附加到每个输入字段，还是有更好的方法来遍历DOM并选择特定元素，以便我可以在其上模拟点击事件？

这是我的渲染

render (
    <form className="products">
      <input onChange={this.handleName} name="name" type="text" />
      <input onChange={this.hanndleAge} name="age" type="text" />
    </form>
)

和我的测试

it('Should parse input fields', () => {
   Product = TestUtils.renderIntoDocument(<ProductComponent />);

   // This returns all the inputs but how do tell them apart? 
   let inputs = TestUtils.scryRenderedDOMComponentsWithTag(Product, 'input');
});

Answer 1

如果你想要使用它们的唯一原因是你能够测试你的组件，你不应该保存引用。

inputs变量是包含所有结果的常规数组，您可以通过索引获得所需的结果。

it('Should parse input fields', () => {
   Product = TestUtils.renderIntoDocument(<ProductComponent />);

   // This returns all the inputs but how do tell them apart? 
   let inputs = TestUtils.scryRenderedDOMComponentsWithTag(Product, 'input');

   let firstInput = inputs[0];
   let secondInput = inputs[1];
});

在隔离组件的主要DOM元素（在您的情况下为form）之后，您还可以使用常规浏览器API遍历DOM树：

it('Should parse input fields', () => {
   Product = TestUtils.renderIntoDocument(<ProductComponent />);

   let node = ReactDOM.findDOMNode(Product);

   let firstInput = node.querySelector("[name=name]");
   let secondInput = node.querySelector("[name=age]");
});

在React with Jest中测试模拟表单输入

1 个答案: