How to Mock React Components For Testing

[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.