What's the Difference Between findBy*, getBy* and queryBy* in React Testing Library?

The main difference between the three (i.e. findBy*, getBy* and queryBy*) is that their return values differ:

findBy* Methods

  • When Match Is Found: Returns a resolved Promise.
  • When Match Is Not Found: Returns a rejected Promise.

getBy* Methods

  • When Match Is Found: Returns the node that matches the query.
  • When Match Is Not Found: Throws an error.

queryBy* Methods

  • When Match Is Found: Returns the node that matches the query.
  • When Match Is Not Found: Returns null.

queryBy* methods can be useful for asserting an element that is not present (for example, expect(screen.queryByText('foo')).not.toBeInTheDocument()).

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.