Jan 01, 2021

Testing React with Jest: Validate Your Components Quickly!

Code

Elevator Pitch (~300 words)

In this talk, we look at how React apps are tested E2E and why Jest stands out compared to other test frameworks. We do a live demo while implementing several main test scenarios using Jest, React Testing Library and Puppeteer

Abstract

How confident are you in your React app? Does your UI render after you add a new item to the nav menu? What about style changes - do you know how a font change affects the rest of your app?

If you want to have confidence in your React app, you need to have tests. Unfortunately, most testing frameworks are hard to set up, and it takes too long to run them. But this is not the case with Jest!

Jest allows React developers to get a quick test result for any change on the app. And setting up Jest on React has never been easier than today!

In this talk, we look at how React apps are tested E2E and why Jest stands out compared to other test frameworks. We do a live demo while implementing several main test scenarios using Jest - get ready to code along!

Takeaways

  1. Test Pyramid for React Testing
  2. Basics of Jest with React Testing Library and Puppeteer
  3. Tips and tricks for prioritizing integration testing in React