Problem with testing library and fireEvent

Question

I can render my component properly and get the input tag by using .getByPlaceholderText. The problem is that after I use fireEvent to change the input value, I am not able to get the same input by using findByText. This is not the test I'm going to use; I just want to understand why this is not working.

    it('displays the clearIcon by default', async () => {
      // Render my component
      render(<SearchInput {...defaultProps} />)
      // find the input html element by placeholder - it works
      const inputNode = await screen.findByPlaceholderText(/search/i)
      // fire an event where I change the value of the input to "Text"
      fireEvent.change(inputNode, { target: { value: 'Text' } })
      // find the same element searching by the text I added in it - "Text"
      // this fails saying that it's "unable to find an element with the text /Text/i"
      const sameInput = await screen.findByText(/Text/i)
      expect(sameInput).toBeInTheDocument()
    })

devamat · Accepted Answer · 2021-05-01 06:12:00Z

1

The problem was that I was trying to test a nested component, and the states for the input value are in the wrapper component. Moving my tests to the wrapping component solved the issue.

answered May 1, 2021 at 6:12

devamat

2,5139 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with testing library and fireEvent

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related