Utah

wife, 4 kids, & a dog

Kent C. Dodds

Confident React βš›οΈ

...with React Testing Library 🐐

Please Stand...

if you are able ❀️ ♿️

What this talk is

  • Discussion how to test web applications (React) effectively
  • A history lesson of πŸ™ Testing Library and why it is the way it is

What this talk is not

  • Discussion of functional/E2E testing
  • Boring? Hopefully it's not boring...

Let's
Get
STARTED!

Why do we test our software?

CONFIDENCE

What tests give the MOST confidence?

The more your tests resemble the way your software is used, the more confidence they can give you.

What tests give the MOST confidence?

Manual!!!

Well... not really...

How do we overcome human shortcomings?

Automation!

... that automates what the manual tester would do. Because:

The more your tests resemble the way your software is used, the more confidence they can give you.

The Testing Pyramid

οΏ heap

πŸ’°πŸ€‘πŸ’°

πŸŽπŸ’¨

🐒

E2E Tests

Integration Tests

Unit Tests

*The pyramid is based on the assumption that broad-stack tests are expensive, slow, and brittle compared to more focused tests, such as unit tests. While this is usually true, there are exceptions. If my high level tests are fast, reliable, and cheap to modify - then lower-level tests aren't needed.

*martinfowler.com/bliki/TestPyramid.html

The Testing Trophy

οΏ heap

πŸ’°πŸ€‘πŸ’°

πŸŽπŸ’¨

🐒

Simple problems πŸ€“

Big problems πŸ˜–

How would you test this?

How would you test this manually?

The Old State of the Art

jsdom

Jest

Enzyme

The New State of the Art

jsdom

Jest

Testing Library

React Testing Library

render

fireEvent

waitForElementToBeRemoved

waitFor

userEvent

render

  • rerender
  • unmount
  • container
  • asFragment

screen

  • *ByRole
  • *ByLabelText
  • *ByPlaceholderText
  • *ByDisplayValue
  • *ByAltText
  • *ByTitle
  • *ByTestId

get, query, find...

userEvent

  • click
  • dblClick
  • type
  • upload
  • clear
  • selectOptions
  • deselectOptions
  • tab
  • hover
  • unhover
  • paste

Do what the user does

Resources

Thank you!

Confident React

By Kent C. Dodds

Confident React

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps? Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended.

  • 13,868