CODEWITHSUNDEEP
javascriptreactjstestingjestjsreact-testing-library
devamat
devamat

Reputation: 2503

Problem with testing library and fireEvent

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()
    })

Upvotes: 0

Views: 1701

Answers (1)

devamat
devamat

Reputation: 2503

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.

Upvotes: 1

Related Questions