title: Unit test form submission with data using react testing library
body: <p>I have a react component with a form. I want to unit test (using jest and RTL) if form gets submitted with correct data. Here are my component and unit test method:</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>class AddDeviceModal extends Component {
    handleOnSave(event) {
      const { deviceName } = event.target;
      const formData = {
        deviceName: deviceName.value,
      };
      this.props.onSave(formData);
    }
  
    render() {
      return (
        &lt;Form onSubmit={this.handleOnSave}&gt;
          &lt;Form.Label&gt;Device Name&lt;/Form.Label&gt;
          &lt;Form.Control name="deviceName" placeholder="Device Name" required /&gt;
          &lt;Button type="submit"&gt;Save Device&lt;/Button&gt;
        &lt;/Form&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Unit Test:</strong></p>
  
  <pre><code>it("Test form submit and validation", () =&gt; {
    const handleSave = jest.fn();
    const props = {
      onSave: handleSave,
    };
    render(&lt;AddDeviceModal {...props} /&gt;);
    const deviceNameInput = screen.getByPlaceholderText(/device name/i);
    fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
    fireEvent.click(getByText(/save device/i));
  });
  </code></pre>
  
  <p>However, in <code>handleOnSave()</code>, I get error as <code>deviceName</code> is <code>undefined</code>. For some reason, it is not able to get the textbox value from <code>event.target</code>. Am I doing something wrong in above code? Needed help in fixing this issue.</p>