Rendering React components in your tests

Most React apps are tested with React Testing Library (RTL) (which is what we will be using in this course)

RTL promotes best practices for testing React components.

Avoid inspecting internal state; instead, test it like a real user would by asserting on what's rendered.

This means, in an ideal world, we write our tests to do things like:

  • find buttons based on their accessible name
    • (screen.getByRole('button', { name: /add payment/i }))
  • find text inputs based on their label
    • (screen.getByLabelText('Your name'))
  • interact in a realistic way (hover, click, etc.)
    • (await userEvent.click(someButton))

In this lesson we will go over some examples of how to render and write some small tests.

Loading full lesson content & code...

Ready to try running tests for this lesson?