Amazing crash course. Started by knowing nothing about testing react apps and finished with confidence. I'm able to follow along with you using the Typescript. Thank you man.
Thanks for going through the setup and explaining this. Please make more projects with TDD and if you could please include Integration and E2E testing in the future.
Thank you for the helpful video. I have to say that the most intricate part when using jest is setting up the testing environment and you definitely help me overcome it. I have to read more and more to understand how the chain of libraries work together to make jest operate with browser API, browser features and DOM tree. Once again, thanks so much and I hope you can release more informative videos.
If you get this error when running the test @13 mins... Cannot find module 'jest-dom/extend-expect' Change your import in jest setup file to this: import "@testing-library/jest-dom";
Thanks for the video, it's really kind of you to share so much of your time! One note I have is that your VSCode colours aren't great for people with colour vision deficiency - I can barely see the red colours on your screen (e.g. brackets) which might not sound like a big deal but actually it can make it really difficult to grasp what you've written at times. Please consider switching to a palette that has better contrast throughout!
Can't find you on Discord anymore, so I guess that sending you a private message isn't an option. But I watched your very first discord bots and dashboard series, and you pretty much kickstarted my carreer. I have been working professionaly for a year now as a self-taught software engineer, thank you.
Love that you did a TS setup. Will you be providing a TDD project with react + ts in the future? The react tdd with ts topic has a shortage of good learning materials.
Of course the context matters here, if you're looking for a specific text in the DOM as a result of a behavior, then no it is not. The text value in the DOM can be the result of an async operation that happened, e.g: making an API call. Of course if you were testing if the API call was made, instead of focusing on testing the result of what happens after the API call, then that would be testing the implementation.
Interesting. What if you are testing the expected text from an api call but the returned response from the api call varies per call even with the same payload i.e. Getting appointment data from a store or products from a cms that someone else updates? At that point, checking text from api's in your test would fail of someone updates the content coming from the cms etc... no?@@ansonthedev
No, because you aren't actually running those tests while your API is being called in a production environment. You're thinking that if someone is actively using the app, it is going to cause the test to fail. Well tests don't run in the live production app. They run when you run them locally, when you run them on a Pipeline, before deployments, etc. everything BUT when the live app is running. In your example, you would actually: 1) Call an API with a Payload, assert a behavior on the DOM occurred after the API call was made. 2) Call the API again and change the data with something else, assert the expected behavior occurred. So each time you are making a change to the API in your test, you are asserting that the output of that change happened on the page. When people use your app live, you are not re-running your tests again. Tests are designed to run isolated away from the actual software. Not while the software is running.
Found you on r/react. Great tutorial. Could you please make part 2 with mockImplementation. So, the usage of this is with redux/redux toolkit dispatch events. In my current project, I am using Electron with React, since E2E framework like Cypress doesn't provide support, its hard to test my code. Also, the fact that IPC events are tricky to test. Would love a tutorial touching these domains as well. Again, welcome back, what I could infer from fellow devs comments. :D
I had a problem while configuring jest with typescript - .toBeInTheDocument() was not found. Here's quick fix: pnpm add -D @types/testing-library__jest-dom
finally you are back after 7 months we are glad that you are with us)
Amazing crash course. Started by knowing nothing about testing react apps and finished with confidence. I'm able to follow along with you using the Typescript. Thank you man.
Thanks for going through the setup and explaining this. Please make more projects with TDD and if you could please include Integration and E2E testing in the future.
You are such a good teacher, I always find value in your videos.
I'm late but thank you very much!
cannot find module 'msw/node' from 'mocks/server.js', after the msw moved to v2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thank you for the helpful video. I have to say that the most intricate part when using jest is setting up the testing environment and you definitely help me overcome it. I have to read more and more to understand how the chain of libraries work together to make jest operate with browser API, browser features and DOM tree. Once again, thanks so much and I hope you can release more informative videos.
Welcome back, Anson. I was worried, that something bad happened. Thanks for another tutorial :)
Hey Anson long time
your express playlist helps me alot I am very grateful to you Thank you
You're welcome. Great to hear that! :)
use App router nextjs13
import {useRouter} from 'next/navigation';
const router = useRouter();
This is not testable when used
Please help
Same here
I have the same issue... Router is not mounted yet when trying to render a component. Please make a video about it 🥺
Welcome back anson! Im certain everybody missed you! Can’t wait for your livestreams!
Bro How you been?!! Welcome back, btw loved your livedstreams got to learn alot from the chuchat streams and really liked your keyboard cam streams...
Great. Thank you :)
Very grateful for this
If you get this error when running the test @13 mins...
Cannot find module 'jest-dom/extend-expect'
Change your import in jest setup file to this: import "@testing-library/jest-dom";
Thanks for the video, it's really kind of you to share so much of your time! One note I have is that your VSCode colours aren't great for people with colour vision deficiency - I can barely see the red colours on your screen (e.g. brackets) which might not sound like a big deal but actually it can make it really difficult to grasp what you've written at times. Please consider switching to a palette that has better contrast throughout!
Can't find you on Discord anymore, so I guess that sending you a private message isn't an option.
But I watched your very first discord bots and dashboard series, and you pretty much kickstarted my carreer.
I have been working professionaly for a year now as a self-taught software engineer, thank you.
Finally you are back....your redux video was awesome
Thank you very much! :)
I had this error:
"Cannot find module '@testing-library/jest-dom/extend-expect' from 'jest.setup.js'"
I fixed it by removing the 'extend-expect' part.
great video! even as an experienced programmer I learned something
In the case of configuration using Typescript, we currently have to install Jest types as well.
Hi! Im looking for Jest tutorial for nextjs with app directory. Does anyone know anything about it?
Hey Anson welcome back, i hope you are good ❤😊
at 40:33 if you are searching for role in Chrome/Chromium you can find it under Accessibility and not Computed Styles (at least on my end)
Love that you did a TS setup. Will you be providing a TDD project with react + ts in the future? The react tdd with ts topic has a shortage of good learning materials.
Hey Anson can you please make next 13.4 lecture it would be super helpful.
Happy Teachers day.
Underrated channel
Welcome back miss your videos a lot🎉🎉🎉
Thank you!
Should I see this video if i want testing in nextjs app router
Welcome Back 😁
Isn't looking for specific text in the dom the same as testing implementation? The text could easily change and this makes the tests more brittle.
Of course the context matters here, if you're looking for a specific text in the DOM as a result of a behavior, then no it is not. The text value in the DOM can be the result of an async operation that happened, e.g: making an API call. Of course if you were testing if the API call was made, instead of focusing on testing the result of what happens after the API call, then that would be testing the implementation.
Interesting. What if you are testing the expected text from an api call but the returned response from the api call varies per call even with the same payload i.e. Getting appointment data from a store or products from a cms that someone else updates? At that point, checking text from api's in your test would fail of someone updates the content coming from the cms etc... no?@@ansonthedev
No, because you aren't actually running those tests while your API is being called in a production environment. You're thinking that if someone is actively using the app, it is going to cause the test to fail. Well tests don't run in the live production app. They run when you run them locally, when you run them on a Pipeline, before deployments, etc. everything BUT when the live app is running.
In your example, you would actually:
1) Call an API with a Payload, assert a behavior on the DOM occurred after the API call was made.
2) Call the API again and change the data with something else, assert the expected behavior occurred.
So each time you are making a change to the API in your test, you are asserting that the output of that change happened on the page. When people use your app live, you are not re-running your tests again.
Tests are designed to run isolated away from the actual software. Not while the software is running.
This is awesome thanks a lot
Found you on r/react. Great tutorial. Could you please make part 2 with mockImplementation. So, the usage of this is with redux/redux toolkit dispatch events.
In my current project, I am using Electron with React, since E2E framework like Cypress doesn't provide support, its hard to test my code. Also, the fact that IPC events are tricky to test. Would love a tutorial touching these domains as well.
Again, welcome back, what I could infer from fellow devs comments. :D
Thank you!
Great job... Thanks.
Thanks!
Thank you! :)
The bangle bazz
Just thank you ❤
Yay, you're back!
yoo, anson welcome back👍
Nice video!
I have a question about next/image. How can I mock and test a component that has images inside?
next/image are basically image elements in DOM. you can get it just like any other HTML element.
wonderful content
Thank you!
You're welcome. :)
Welcome back, bro... Learn a lot from your project livestream.
Thank you! I'm happy to hear. :)
what keyboard you use or switches?
Ducky Blue Switches
Hi Man. I cannot join discord
You're back! What happened to your Discord account?
Nice
Welcome Back Anson
❤•••
gg
i miss your streams what happened!
I'll be back soon :)
@@ansonthedev thankgod, you were the only one that kept me coding since we used similar technologies, havent coded since lol
I had a problem while configuring jest with typescript - .toBeInTheDocument() was not found. Here's quick fix: pnpm add -D @types/testing-library__jest-dom
me too, it seems like there is no extend-expect in @testing-library/jest-dom
@@user-hd5it1bk7c @rudzkygen replace your jest.setup,js with the following and it should work
import "@testing-library/jest-dom";