Welcome to the EpicWeb.dev Workshop app!

This is the deployed version. Run locally for full experience.

Testing Library

πŸ‘¨β€πŸ’Ό We have a component that renders a list of error messages. Let's write one test that verifies this renders properly.
As a reminder, here's an example of a test with @testing-library/react:
 * @vitest-environment jsdom
import { expect, test } from 'vitest'
import { Counter } from './counter.tsx'

test('counter increments when clicked', async () => {
	await render(<Counter />)
	const button = screen.getByRole('button', { name: /count:/i })
	expect(button.textContent).toBe('Count: 0')
	await userEvent.click(button)
	expect(button.textContent).toBe('Count: 1')
Let's start with the most basic use case:
  • shows nothing when given an empty list

Asserting non-existence

Before you jump in on this one, you should know that Testing Library consists of a number of utilities that help you find elements in the DOM. The most common one is getByRole, which we've used in the example above. But there are several others you can use. You can read about them in detail in the Testing Library "About Queries" documentation.
In this exercise, we need to discover how to find elements that don't exist in the DOM. And since we're looking for multiple elements, we can use the queryByRole method. This method will return an empty array if no elements are found (which is what we're looking for).
In fact, the only situation where you ever use queryBy* or queryAllBy* queries is when you're trying to assert on non-existence of elements. Otherwise, you should be using the other variants (get* or find*). For more details, refer to the docs.


Testing Library comes with a few utilities you may find handy when developing your tests. If you ever want to know what the DOM looks like at any time, you can run screen.debug() and it will log out the current DOM (formatted and with syntax highlighting).
And if you want to play around with that DOM in a real browser, you screen.logTestingPlaygroundURL() and it will log a URL you can use to open up the current DOM in testing-playground.com. This can be pretty handy when you're trying to figure out how to write a query to find an element.

Let's get started!

npx vitest error-list