The screen object

When we render with React Testing Library, we need a way to find elements that were rendered, and interact with them.

The recommended approach is to use screen, from the @testing-library/react package.

This is normally imported like this:

import {
  render,
  screen,
} from '@testing-library/react';

Note: window.screen exists in every DOM environment. If you forget to import screen from @testing-library/react, your tests will reference the wrong object (window.screen) and fail in confusing ways. Always import it explicitly:

import { screen } from '@testing-library/react';

This is an introduction to some common functions. We will cover them in more detail in subsequent lessons.

Loading full lesson content & code...

Ready to try running tests for this lesson?