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.

Utilities

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
Login to get access to the exclusive discord channel.
  • general
    npm install everytime I setup a new playground
    Duki ๐ŸŒŒ:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • โœ…1
    2 ยท a month ago
  • general
    Welcome to EpicWeb.dev! Say Hello ๐Ÿ‘‹
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    This is the first post of many hopefully!
    • 18
    81 ยท 11 days ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian ๐ŸŒŒ:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • โœ…1
    1 ยท 3 months ago
  • general
    Remix Vite Plugin
    Binalfew ๐Ÿš€ ๐ŸŒŒ:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • โœ…1
    3 ยท a year ago
  • general
    ๐Ÿ”ญfoundations
    Solutions video on localhost:5639 ?
    quang ๐Ÿš€ ๐ŸŒŒ:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • โœ…1
    9 ยท a year ago
  • ๐Ÿงชfull stack testing
    Failing tests in full-stack-testing workshop
    Szabolcs ๐ŸŒŒ:
    I am getting this warning in the testing workshop. ``` Warning: `ReactDOMTestUtils.act` is deprecate...
    • โœ…1
    2 ยท 5 months ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • ๐ŸŽ‰2
    0 ยท 5 months ago
  • ๐Ÿ’พdata
    general
    ๐Ÿ“forms
    ๐Ÿ”ญfoundations
    double underscore?
    trendaaang ๐ŸŒŒ:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • โœ…1
    2 ยท 6 months ago
  • ๐Ÿ”ญfoundations
    ๐Ÿ’พdata
    general
    ๐Ÿ“forms
    ๐Ÿ”auth
    Native Logging
    trendaaang ๐ŸŒŒ:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • โœ…1
    6 ยท 7 months ago
  • general
    The video play is pretty laggy currently
    QzCurious ๐ŸŒŒ:
    I thought I should tag you for this <@105755735731781632>. Please take a look if something wrong.
    • โœ…2
    9 ยท 8 months ago