Utah

wife, 4 kids, & a dog

PayPal, Inc.

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 bit of a pitch for a testing library that enables more maintainable tests

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.

Let's talk trade-offs

¢heap

💰🤑💰

🏎💨

🐢

Let's talk trade-offs

¢heap

💰🤑💰

🏎💨

🐢

Simple problems 👌

Big problems 😖

How would you manually test this?

The State of the Art

jsdom

Jest

enzyme

Introducing:

render

fireEvent

cleanup

wait

waitForElement

waitForElementToBeRemoved

waitForDomChange

render

  • container
  • rerender
  • unmount
  • container
  • baseElement
  • debug
  • asFragment
  • getByLabelText
  • getByPlaceholderText
  • getByText
  • getByAltText
  • getByTitle
  • getByDisplayValue
  • getByRole
  • getByTestId

Resources

Thank you!