title: How to test Input with React Testing Library?
body: <p>I am trying to test an <code>input</code> value of <code>Search</code> component via React Testing Library.</p>
  <p>Search component receives two props: <code>handleChange</code> and <code>input value</code>: <code>title</code>.</p>
  <p>My goal is to write the test so that initially the input value is empty and when user types  something, test can validate that listening to event value was correct, but it always gets the initial value.</p>
  <p>I'm trying to clear the input before typing but it doesn't work.</p>
  <p>Error is:</p>
  <pre><code> Expected the element to have value:
                         // indicates as empty string which I expect
                      
      Received:
        test            // it is still the default value: `test`, UserEvent.clear didn't clear
  </code></pre>
  <p>Here are the two test first checking if input initially was empty, which works fine and 2nd to listen to the input.</p>
  <pre><code>import { fireEvent, screen, waitFor } from &quot;@testing-library/react&quot;;
  import Search from &quot;../Search&quot;;
  import { render } from &quot;../../../test-utils/test-utils&quot;;
  import &quot;@testing-library/jest-dom&quot;;
  import userEvent from &quot;@testing-library/user-event&quot;;
  
  const mockedOnChange = jest.fn();
  
  describe(&quot;input should be filled with title&quot;, () =&gt; {
    test(&quot;input should be empty initially&quot;, async () =&gt; {
      render(&lt;Search title=&quot;&quot; onChangeHadler={mockedOnChange} /&gt;);
      const input = screen.getByRole(&quot;textbox&quot;, { name: /search/i });
      expect(input).toHaveValue(&quot;&quot;);
    });
     // renderComponent wrapps the `Search` component
    const renderComponent = (searchInputValue: string) =&gt; {
      const view = render(
        &lt;Search title={searchInputValue} onChangeHadler={mockedOnChange} /&gt;
      );
      return view;
    };
  
    test(&quot;input should update by typed text&quot;, async () =&gt; {
      renderComponent(&quot;test&quot;);
      const input = await screen.findByRole(&quot;textbox&quot;, { name: /search/i });
      await waitFor(() =&gt; expect(input).toHaveValue(&quot;test&quot;));
      userEvent.clear(input);
      expect(input).toHaveValue(&quot;&quot;); // error appears here indicating that value was not cleared
  
      // userEvent.type(input, &quot;su&quot;); 
      // await waitFor(() =&gt; expect(input).toHaveValue(&quot;su&quot;));
    });
  });
  </code></pre>