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

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]");
});