Master React Testing with Jest and React Testing Library

Learn how to test React apps with React Testing Library and Jest! A complete, all-in-one guide to fully testing your React projects using React Testing Library and Jest.
React JS Tutorial for Beginners | Full Course in 9 Hours
React JS Full Course: Build Your First App in 1 Hour
JavaScript Basics Before You Learn React

This course uses a time-tested, battle-proven method to make sure you understand exactly how testing works, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.

Testing is used to verify your code works as expected. This provides a set of unique benefits to any frontend:

Author smaller, easier to understand codebases

Deploy your code with confidence that it will behave correctly

Test each portion of your app separately - limit the chance of interrupting your users

Allow each of your engineering teams to work independently

Change your codebase without worrying about breaking an existing feature

Testing is a popular topic, but there is a lot of misinformation online. This course has been developed with input from top engineers to ensure total technical accuracy.

----------------------

What will you build?

This course focuses on testing components in a variety of different environments. You will begin by writing tests for a small mini-project, just to get some quick initial experience. From there, you'll learn about React Testing Library and all of its functionality by building a series of interactive cheatsheets. You can use these cheatsheets as a future reference to easily remember the intricacies of testing. Finally, you'll add tests to a rather large React app, complete with authentication, data fetching, and navigation.

Here's a partial list of some of the topics you'll cover:

Customize your test environment by writing custom Jest matchers

Learn how to debug your tests by fixing many bugs

Run tests faster by implementing a fake data-fetching process

Understand best practices by working on a large React project

See an exhaustive list of all the functionality packed into React Testing Library

Enhance your element-selecting powers by using the ARIA Role system

Get experience testing authentication and routing

Write more efficient tests by learning dozens of testing shortcuts

Finally understand the most mysterious function in React - the 'act' function!

Learn multiple ways of handling third-party libraries in a test environment

Use Jest to 'mock' functions and libraries

What you'll learn

Everything you need to know about testing React Components using React Testing Library and Jest
Understand how to simulate user events and data fetching in a test environment
Verify your components the way your components work - before deploying them!
Get practical, hands-on experience adding tests to a large React project
Explore hidden aspects of testing that aren't covered in any other testing course
Save time by building your own custom Jest matchers
Focus on learning why best practices exist - and when to break them!

#React #Jest #Morioh

Note: If you have any copyright issue with the content used in our channel or you find something that belongs to you, before you claim it to Youtube, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

[ariosetiawan]

00:00:00 Dive In - Let's Get Started!
00:15:54 A Whirlwind Overview of Testing
02:05:37 Understanding Element Roles
02:35:47 Finding Elements with Query Functions
02:59:37 Query Function Suffixes
03:28:30 Matchers in Jest
03:43:09 Big Project Overview
04:31:07 The Mysterious 'Act' Function!

... on progress

[pavelye]

Super solid intro course with a ton of practical insights. Stephen Grider, you rock! 💪

[kikevanegazz]

Steve, this tutorial is amazing. I come to check it out every time I set on testing, and always find the solutions I need. Thanks a lot!

[hassanzaidi]

Honestly couldn't have had a better intro to testing in React.

[azkanorouzi]

I think you're a great instructor, with incredible talent, you have an excellent way of explaining things, and very clear in your approach, please keep up the good work and never give up.

[elhambgh]

Thanks a lot for sharing this great course. Thank you very much for your time and your amazing way to explain things. Keep going

[nanoceballostorres]

Incredible! Thank you very much for your time and your amazing way to explain things.

[strategistaow]

3:43:13 I am stuck here, because I can't folder that contains that project

[Xnn]

Thank you,

aside the part of codesandbox that I couldn't run the tests,

the projects you are offering to teach testing are great, it really explains the basic and can I comprehend it based on other testing experiences

Great video and great teacher

[egedesolomon]

You just got a subscriber, thanks mate!

[amruthavs]

Can someone help please, I have two issues.
1. "empties the two inputs when form is submitted" for this test at 2:03:40, even though I have emptied the name and email inputs in UserForm.js, the test is failing saying it is receiving "jane". I confirmed in browser that the inputs are getting emptied after submitting.

Please note, I rerun the "npm run test" still seeing the same issue.

2. Likewise "can receive a new user and list it" in App.test.js, can see the list getting added in the browser but not in the test, when screen.debug(), tr in tbody is completing missing.

[Xnn]

Hey your project looks cool but I couldn't do the tests myself, on the codesandbox page it doesn't show the testing tab and I'm trying to run it locally but jest is giving me import errors on the setupTests.js file

[alishaliu-yn]

Great course I have found in the website, thank you so much. By the way, where can I found the course ppt and code.

[theophilusboakye]

please where can i find the lecture file?

[Shaktish-kumar]

Awesome content! Thanks Stephen Grider

[AidaHashemii]

but how can I get files and your notes?

[Mahammad-Zubair]

maan this is awsome and one stop solution for learning unit testing react.
Btw is there anyway I can get the github repo for the above code.

[sabbir-holybangla]

How do I find the project's initial folder?

[priyanshumishra]

Please add time stamps in the video and description

[cagatayucer]

I just created a repo for this lecture that contains all examples. Please don’t hesitate to give me a star :)