How to Mock React Components For Testing
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:11] Mocking components. Our app component also renders the home component at the root route. We can test it as well, but our home page component depends on the data from the product provider.
[00:12 - 00:23] It uses it to render the products list. It might also render other components, like products card and so on. And those might have more dependencies, so in the end the test can become quite cumbersome to set up.
[00:24 - 00:35] A common approach to such situations is to mock the dependency so that we can test our component in isolation. We'll write the test that will verify that "App" will render the home component at the root route.
[00:36 - 00:45] We will mock the home component so that we won't have to work with extra dependencies. At the SRCAppSpec.tsx, mock the module containing the home component.
[00:46 - 01:01] Just mock "Home". Here you specify the name of the module. And then you specify the function that should return the mocked version of that module. We want to mock only the "Home" member of this module, which is the home component.
[01:02 - 01:12] Let's override it with the functional component that will return "D" inside of which we'll have "Text Home". It's enough for our test. Now add another test case below the first one.
[01:13 - 01:26] It should say "it renders home component on root route". Add a callback. Here we'll need the history. Equals create memory history. We call history push.
[01:27 - 01:37] And we pass the root route there. Then we render our "App" with container. Render it inside of the router. Pass in the history. All right, we've rendered the "App".
[01:38 - 01:52] Now we expect "container" in our HTML to match "Home". Format the document. So what happens here? We render the "App" inside of the router, where we immediately push "root route" to the history object.
[01:53 - 02:06] And then we expect that after we render the root route, the text will match " Home", because that's how we mocked our home component. It just renders the text "Home". It is a good idea to always try to test the outputs or what the user would see in your application.
[02:07 - 02:20] Instead of trying to test the internal state. Run "yarn". Test. And verify that your tests are passing. Everything is fine. Congratulations. It is also a good idea to always test the negative results.
[02:21 - 02:31] Let's try to push test instead of root URL, see if the test is passing, and it 's failing. Good. That means that our test can fail. And in turn, that means that it's testing something.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)