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

Question

I'm testing out the form input of a React component with Jest but I'm having trouble finding the best way to select the form's input field for entry using React TestUtils. The documentation online shows an example using refs , but the React docs also state that refs should only be used on the parent and not the children of the component. Should I be attaching refs to each input field or is there a better way to traverse the DOM and select the particular element so I can simulate a click event on it?

This is my render

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

and my test

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

You shouldn't save refs if the only reason you want to use them is to be able to test your component.

inputs variable is a regular array with all the results, you can get to the desired result by index.

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

You can also use regular browser API to traverse the DOM tree after you isolate the component's primary DOM element (in your case it's form ):

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