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
https://jestjs.io/docs/en/tutorial-react

👉 React Testing Library
https://testing-library.com/docs/react-testing-library/intro

💻 CodeSandboxes
0-starting-file
https://codesandbox.io/s/0-starting-file-zm2zt

1-rendering-components-for-testing
https://codesandbox.io/s/1-rendering-components-for-testing-y69g5

2-use-dom-testing-library-for-querying-the-dom:
https://codesandbox.io/s/2-use-dom-testing-library-for-querying-the-dom-bzh71

3-rendering-and-testing-with-react-testing-library
https://codesandbox.io/s/3-rendering-and-testing-with-react-testing-library-0kvor

4-simulating-user-interaction
https://codesandbox.io/s/4-simulating-user-interaction-jg46k

5-testing-async-code
https://codesandbox.io/s/5-testing-async-code-4wtsi

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

#react #testing