Тёмный

How to Mock a REST API Server for Testing with Jest & React Testing Library 

Dave Gray
Подписаться 323 тыс.
Просмотров 17 тыс.
50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to mock a Rest API Server for testing with Jest & React Testing Library. In this video, we will mock a REST API Server with MSW and write async unit and integration tests for a Next.js app.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Starter Source Code: github.com/gitdagray/next-tes...
🔗 Completed Source Code: github.com/gitdagray/nextjs-a...
📺 "Testing Your Code" playlist: • Testing Your Code
How to Mock a REST API Server for Testing with Jest & React Testing Library
(00:00) Intro
(00:14) Welcome
(00:38) Prerequisites & Starter Code
(01:00) Lesson Goal
(01:07) Adding Dependencies
(02:39) Mock REST API Server Setup
(08:57) Async Unit Testing
(13:38) Modify the Server Response for a test
(16:18) Completing the Mock Endpoint handlers
(19:02) Completing the CRUD Unit Tests
(23:18) Adding the Async CRUD functions to the app
(30:11) Adding New & Updating Integration Tests
(41:14) Unit Test Update
(43:27) Wrap-up
📚 Tutorial References:
🔗 Next.js Official Site: nextjs.org/
🔗 React Testing Library: testing-library.com/docs/reac...
🔗 Jest: jestjs.io/
🔗 TypeScript: www.typescriptlang.org/
🔗 MSW: mswjs.io/
🔗 MSW on npm: www.npmjs.com/package/msw
Was this tutorial about how to create a Mock REST API Server and async testing helpful? If so, please share. Let me know your thoughts in the comments.
#mock #rest #api

Опубликовано:

 

20 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 34   
@gmjitendra
@gmjitendra 8 дней назад
Excellent!. Thank you so much Dave on this testing tutorial.
@yourcasualdeveloper
@yourcasualdeveloper 7 месяцев назад
Here you are again... Another topic I discovered and another one you already covered.... thanks a lot
@adeyemiadeyanju2247
@adeyemiadeyanju2247 5 месяцев назад
Exactly this type of content but with Vitest. Great work and thank you
@johnpaulpineda2476
@johnpaulpineda2476 10 месяцев назад
Mah man on 208k subs??? You're growing too fast man you deserve all! last time i view your vids you're just on 70k subs.
@27sosite73
@27sosite73 5 месяцев назад
263k! and he deserve many many many times more
@Habib-oc5si3ng4v
@Habib-oc5si3ng4v 10 месяцев назад
Hey Dave please explain about edge and node runtime in NextJs and please teach us NestJs. thank you I learned so much from you.
@7doors847
@7doors847 10 месяцев назад
Yay! My my my! 🙌
@himanshurai2854
@himanshurai2854 10 месяцев назад
Hi Dave, I've just started watching your web dev tutorials. Does your playlist named "full course programming " follows a specific sequence that aligns with web dev roadmap? Thanks for all the valuable content you provide! 👏
@DaveGrayTeachesCode
@DaveGrayTeachesCode 10 месяцев назад
Yes, and you can follow my Web Dev Roadmap at the link in the description of this video.
@dindoleonard
@dindoleonard 10 месяцев назад
the best!
@maxpayne9074
@maxpayne9074 7 месяцев назад
Hi Programmers. In folder ./lib fetch request's ( await fetch("/todos")). For working app need to use Route Handlers. Did I understand correctly?
@michalnowak2181
@michalnowak2181 9 месяцев назад
thx
@shubhamsrmn
@shubhamsrmn 10 месяцев назад
Hi I am using next js 13 app deployed on amplify aws but it gives me html chunks code after some time please tell me any solution.
@anirudh2660
@anirudh2660 10 месяцев назад
Hi Dave 👋 How many more videos we can expect to complete this playlist? Approximately!!!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 10 месяцев назад
I may give it a break for a bit and then come back with React & Vite and/or E2E with Cypress.
@anirudh2660
@anirudh2660 10 месяцев назад
@@DaveGrayTeachesCode that's a great news Dave ❤️ . We are so excited.
@anirudh2660
@anirudh2660 10 месяцев назад
@@DaveGrayTeachesCode Are you going to recreate full react playlist?
@storozhukua
@storozhukua 8 месяцев назад
when i run test i get err - TextEncoder is not defined
@Brian-vy5xp
@Brian-vy5xp 4 месяца назад
Only works for client fetch with msw
@jora5483
@jora5483 6 месяцев назад
Unfortunately, msw doesn't support request, carrying FormData and binary payload ...
@dvnkx5380
@dvnkx5380 8 месяцев назад
Huh. msw 2.0 has been released
@male3399
@male3399 10 месяцев назад
Are you planning to do a video about cypress?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 10 месяцев назад
Sometime in the future yes.
@yuliasereda5671
@yuliasereda5671 9 месяцев назад
at 10:32 you created a fetch. If I use fetch to real api should I create this fetch as fake or it should be request to real url?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 8 месяцев назад
We are creating _mocks_ here for testing. You do this to eliminate outside dependencies.
@yuliasereda5671
@yuliasereda5671 8 месяцев назад
​@@DaveGrayTeachesCode so I can't use a real api for testing? I can't put it to the handlers? So we simulate a fetching? In test I use real fetch and it works but it says "Warning: captured a request without a matching request handler" - if i use real api in handler it is breaking the test.
@brandonetter
@brandonetter 8 месяцев назад
@@yuliasereda5671 I promise you- if you don't understand what's happening in this code or WHY you're doing it, then you can just stop worrying about writing tests for now. Keep working on development and general JS skills first.
@yuliasereda5671
@yuliasereda5671 8 месяцев назад
@@brandonetter I understood almost everything, but I have never wrote tests before
@omidoyinayodeji9338
@omidoyinayodeji9338 10 месяцев назад
Can I do this also with react?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 10 месяцев назад
Yes.
@omidoyinayodeji9338
@omidoyinayodeji9338 10 месяцев назад
Okay, thanks for all you do Sir.
@comicorigin8656
@comicorigin8656 10 месяцев назад
atlast 😅😅
@TravinskiyVladislav
@TravinskiyVladislav 10 месяцев назад
BUT NOT AT LEAST
@omidoyinayodeji9338
@omidoyinayodeji9338 10 месяцев назад
Asin .....its like I have been waiting for years 😁😁
Далее
Next.js Project Example with Discussion
14:15
Просмотров 9 тыс.
Next.js with React Testing Library, Jest, TypeScript
25:04
Кто быстрее? (GTARP)
19:19
Просмотров 332 тыс.
Mocking Asynchronous Functions with Jest
21:50
Просмотров 68 тыс.
Master API Mocking with MSW
41:40
Просмотров 2,1 тыс.
Introduction to Jest Testing | JavaScript Unit Tests
25:30
Stop Writing So Many Tests
10:02
Просмотров 84 тыс.
Mock vs Spy in Testing with Jest: Which is Better?
25:12
Why Vitest Is Better Than Jest
13:13
Просмотров 130 тыс.
Кто быстрее? (GTARP)
19:19
Просмотров 332 тыс.