Intro to React Testing [Jest and React Testing Library Tutorial]

Chris gives an introduction to React Testing and walks through a Jest and React Testing Library tutorial. Testing is a critical part of the React development process. There is no shortage of different ways to test our apps. This talk will give an intro to general testing principles and tools before diving into the specifics of testing React components using Jest and React Testing Library, the tooling recommended by the React core team.

Guest presenter, Chris Schmitz, Senior Software Engineer at Handshake, will teach you how to get started with Jest and the React Testing Library.

👉 Jest Documentation

👉 React Testing Library

Thanks to Maciek Sitkowski for sharing these CodeSandboxes below with us for you to learn with!

💻 CodeSandboxes
0-starting-file

1-rendering-components-for-testing

2-use-dom-testing-library-for-querying-the-dom:

3-rendering-and-testing-with-react-testing-library

4-simulating-user-interaction

5-testing-async-code

Segments:
0:00 - Intro and Agenda
2:23 - What is a React Test?
3:53 - Why Write Tests?
4:13 - Documentation
5:17 - Consistency
6:10 - Comfort and Confidence in Testing
7:29 - Productivity
8:16 - Types of Tests
10:14 - React Component Tests
12:36 - A Jest Test
15:10 - Walkthrough Begins
18:53 - Rendering Components for Testing
23:54 - Use DOM Testing Library for Querying the DOM
31:14 - Rendering and Testing with React Testing Library
35:11 - Simulating User Interaction
41:45 - Testing Async Code
49:00 - More Resources to Explore

================================
Interested in Working with Headway?
================================

Book a free private call where we'll listen to your problems, identify opportunities for your business, and show you exactly how Headway's unique approach and proven strategies can help you reach your goals.

Schedule a free consultation:

================================

👋 What is ReactJS Green Bay?
ReactJS Green Bay is a monthly series for front-end developers that use React and JavaScript to build products. Learn about new tools, better workflows, and discuss ideas with a growing community!

🎟 Upcoming events

📺 Recordings from past events

🎙Listen to our podcasts:

🌊Seaworthy - A podcast about building successful software

⚓️Even-Keeled - The craft of creating software and effective development teams

Connect with us:
🌅 Instagram

🐦 Twitter

➡️LinkedIn

[headwayio]

*Segments:*
0:00 - Intro and Agenda
2:23 - What is a React Test?
3:53 - Why Write Tests?
4:13 - Documentation
5:17 - Consistency
6:10 - Comfort and Confidence in Testing
7:29 - Productivity
8:16 - Types of Tests
10:14 - React Component Tests
12:36 - A Jest Test
15:10 - Walkthrough Begins
18:53 - Rendering Components for Testing
23:54 - Use DOM Testing Library for Querying the DOM
31:14 - Rendering and Testing with React Testing Library
35:11 - Simulating User Interaction
41:45 - Testing Async Code
49:00 - More Resources to Explore


👉 *Jest Documentation*

👉 *React Testing Library*

*Thanks to Maciek Sitkowski for sharing these CodeSandboxes below with us for you to learn with!*

💻 •CodeSandboxes•
0-starting-file







4-simulating-user-interaction

5-testing-async-code

[gabriel_export]

I really like this speaker. His delivery is clear, and well-paced.

[matthewcovell]

You wrote your presentation as a web application - you sir are a hero 🙌

[limitless]

I've been coding react for a year now and I've never touched testing thanks for this great introduction.

[danishshamim]

Thanks, for this overview - I just jumped into FE React Project with no prior experience with react or FE testing, this explains some of the frameworks that we have in the project really well

[techsimplified]

I'm glad i found this gem. Been trying to setup testing for one of our projects and it is the first time i'm setting up testing for one of my projects. This was great. Thank you

[stevepascoe]

Thanks for clearly showing how to approach productive front end testing.

[Cheesedipper]

Thank you so much for sharing the talk, it really helped me getting started with testing my react components

[dropofsun]

This was so helpful! I'm new to React and writing tests, so thanks very much for the overview.

[hypebeastuchiha]

Thank you for giving us this great information for free.
Unsung hero 😘

[kevinnacario]

Thank you for making our life so easy.

[ssokurenko]

Nice presentation 👍 so clear and ready to use immediately

[losrobbosful]

How can 11 people not like that presentation?

[OTadashi]

Wow, this presentation is awesome.

I'm already experienced with unit testing, but new on ReactJS world, this video helped me a lot to get started.
I was watching part by part while coding my own todo-list and is so inspiring to see my testing breaking, passing, then improve the code to look better.

Thanks for sharing man :)

[Mvrck]

Essentially, this got me started to test React! Really helpful, thank you :)

[nomtijorti]

Very straightforward. Love it. Wish he explored Hooks though. Great work nonetheless 👍👍👍

[circulardep]

This is one of the best tools that have been produced in the frontend world recently.

[nicolash]

This presentation is great after using RTL/jest a little bit on your React project. Covering each step (JS assertion > jest runner > RTL dom > RTL react) is great to understand what is going on under the hood.

[josemaria]

The talk is awesome but that intro is so cool! lol

[TheTanMusic]

Thank you very very much, you are awesome !