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.
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.
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.
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!
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.
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.
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";
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
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.
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
