React Testing Crash Course with Next.js

In-depth tutorial on how to write Unit Tests & Integration Tests with Next.js & React.

Code Repository (JavaScript): https://github.com/stuyy/nextjs-react-unit-testing-tutorial-javascript
Code Repository (TypeScript): https://github.com/stuyy/nextjs-react-unit-testing-tutorial-typescript
React Testing Library: https://testing-library.com/docs/react-testing-library/intro/
Next.js Testing Documentation: https://nextjs.org/docs/pages/building-your-application/optimizing/testing#jest-and-react-testing-library
Jest Docs: https://jestjs.io/

Support the Channel:

Become a Member: https://www.youtube.com/ansonthedeveloper/join
Become a Patreon: http://patreon.com/stuyy
Buy me a Coffee: http://ko-fi.com/anson
Donate on Streamlabs: https://streamlabs.com/ansondevacademy/tip
Donate on PayPal: https://paypal.me/ansonfoong

Connect with me:

Twitter: https://twitter.com/ansonthedev
Discord: https://discord.gg/Gd5fAEJDQD
GitHub: http://github.com/stuyy
Twitch: http://twitch.tv/stuy

0:00 Intro - What are Unit Tests
4:30 Setup Project in JavaScript
17:23 Setup Project in TypeScript
25:00 Writing Our First Test
32:00 Searching for elements by text
38:00 Searching for Buttons
46:00 Searching for Input Fields
51:00 getByLabelText
53:00 getByPlaceholderText
55:00 getByDisplayValue
1:02:40 Assering Elements Not In Document
1:03:30 queryByText
1:08:44 Clicking on Buttons
1:14:24 Test appearance of elements that appear async
1:16:10 findBy queries
1:23:22 Mock Component Props
1:48:03 Mocking API Requests with msw
1:51:50 Installing & setup msw
2:03:30 Setup Next.js API routes
2:07:11 Fetching Data in Component
2:14:10 Install fetch polyfill
2:27:00 LoginForm Example