Unit Testing in React with Jest - Mock, Snapshots and more

My Udemy Courses:
www.udemy.com/...
Git Repo link:
github.com/ghu...
⚙️ Gadgets I use for Recording:
💻 Laptop - Macbook PRO M1 - 16/512
amzn.to/4eUqrSe
🎤 MIC - Samson Technologies Q2U USB/XLR Dynamic Microphone
amzn.to/3W9Z4wl
🖱️Mouse - Logitech G402 Gaming Mouse Hyperion Fury USB, Black
amzn.to/3RY4xUy
⌨️ Keyboard - Logitech K380 Multi-Device Bluetooth Keyboard
amzn.to/3RY4Fn0
🖥️ Monitor - UltraSharp 24-Inch Screen Led-Lit Monitor (U2419H)
amzn.to/4bxidN6
In this video, we will learn how to write units test in react or how to do unit testing in react with Jest.
Unit Testing is a testing method that tests an individual unit of software like a function. Unit testing for React Apps means testing an individual React Component. Unit Testing is important for React Apps, as it helps in testing the individual functionality of React components.
We will take a deep look at how to write these units. We will take two different components and write unit tests to have a better understanding.
Watch the complete video and if you face any issues let me know is the comment section.
Like, Subscribe, and Share. Cheers!

[@syedsadath4918]

Subscribed 👍🏼, please create more videos on react testing with Jest and react testing library.

[@hkhsm359]

Nice and very help full video. Thanks for sharing.

[@premprakash6673]

Very helpful video. Could you please make videos on jest and react testing library which includes concepts like jest.spyOn, .mockImplementation, .resolves, .rejects, promise, .mockResolvedValueOnce etc. I am not finding any tutorials on this and in my project these things are heavily used

[@codingwithabbas]

Hi Prem, I will do it soon. I know these concepts or functions are heavily used in Jest.

[@ScottStrong]

The method of getting the elements for comments has changed since this video's release. This was giving me an error until I made the following suggested change: const comments = await waitFor(() => screen.getAllByTestId("comment")); -> replaced with -> const comments = await screen.findAllByTestId("comment"); A very minor change, but it fixed an error that was appearing as a result. Also, this tutorial was awesome and super helpful! Thanks for making it!

[@deeksha5626]

it has to be replaced with const comments = await screen.findAllByTestId("comment");

[@sundayuchegbu2060]

Awesome... quite helpful

[@codingwithabbas]

Glad it helped

[@061_suryak4]

hi, i got error like could not find react-redux context value; please ensure the component is wrapped in a but i also wrapped by provider within store and i change old to latest version please gave me a any solution

[@codingwithabbas]

Is you App component wrapped in Provider?

[@BalasubramaniamM-d2r]

how to run this test code with sonar-scanner

[@surajkhadse-c3f]

Hi, How can i test when data coming from API instead dummy data

[@codingwithabbas]

Will make a details video on that as well.

[@cherukupalliramanjaneyulu4598]

Thank you so much sir

[@dhruvsakariya3129]

SyntaxError: Cannot use import statement outside a module I am getting this error Please help 😥

[@codingwithabbas]

Have you added this test script in package.json file? "test": "react-scripts test --transformIgnorePatterns node_modules/jest/bin/jest.js/",

[@dhruvsakariya3129]

@@codingwithabbas It worked Thank you 🙏

[@chd6085]

hey, how are you getting autocomplete on jest...?

[@codingwithabbas]

Check is this package (@types/jest) present in your package.json file.

[@chd6085]

@@codingwithabbas no its not there... where should I put this...? should it be inside any other object or at the root of the package.json object....?

[@codingwithabbas]

Install it as dev dependency.

[@Dev-Phantom]

cool

[@thomaselster8629]

𝓅𝓇𝑜𝓂𝑜𝓈𝓂

[@mihirraval2174]

Can you give me your mail id I have one question!! My tsx component not rendering 😢

[@codingwithabbas]

Component is not rendering? Can you see any error?

[@mihirraval2174]

@@codingwithabbas yes that's why I have to send some code pictures and also explain why I am getting error

[@mihirraval2174]

Because that is my project which will be deploy on 21 -8+ -2024 can you help me then must help ??