Designing Effective Tests with React Testing Library

Rate this content
Bookmark
Slides

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?


In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.


Prerequisites:

- Familiarity with building applications with React

- Basic experience writing automated tests with Jest or another unit testing framework

- You do not need any experience with React Testing Library

- Machine setup: Node LTS, Yarn

This workshop has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

The instructor is Josh Justice, who goes by CodingItWrong online.

The primary focus is on designing effective tests using React Testing Library, including live coding, exercises, and sharing useful resources.

Attendees can find more information and resources at codingwrong.com, which is mentioned in the footer of all the slides.

The workshop discusses React Testing Library, user event library, Jest, and various tools and approaches for mocking web service requests.

Josh Justice suggests using Mastodon for social media interactions and can be found at [email protected].

The philosophy is to write tests that resemble how users interact with the application, focusing on testing the contract of components rather than implementation details.

Josh Justice has written a book on test-driven development with React Testing Library, which includes free introductory chapters and is available with a discount code for workshop participants.

Josh Justice works for Test Double, a consultancy focused on improving the world's software by embedding developers with teams to improve software quality.

Josh Justice provides a personal Discord community, a newsletter from Test Double, and various social media channels like Mastodon for staying updated on React and testing.

'Get by' functions throw an error if the element is not found, 'query by' functions return null if the element is not found, and 'find by' functions return a promise and wait for the element to appear.

Josh Justice
Josh Justice
131 min
07 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop on designing effective tests with React Testing Library covers topics such as testing the contract and rendered UI, using the Screen API for text assertions, testing environment and accessibility, the benefits of test-driven development, choosing the right query method, confirming presence and absence of elements, testing external functions and mock functions, organizing tests and testing effects, mocking web service requests, testing asynchronous code, and testing the contract and conclusion.
Video transcription and chapters available for users with access.