How to Test React Shared Components

[00:00 - 00:15] Shared components. Before we move on and start testing our pages, let's test the shared components. All of them are defined inside of the SRC shared folder. Header. The header component renders the title of the store and also the cart widget.

[00:16 - 00:27] The cart widget is defined in a separate component, so we'll mock it and test the header in isolation. We will test that the header renders correctly and that if you click on the logo, it will redirect you to the main page.

[00:28 - 00:44] Create a new file. As our C shared header spec, TSX and add the following contents. Describe header, pass in callback. Here we test it to do. We plan the test before implementing it.

[00:45 - 00:58] This is why we're using that to do keyword. We say renders correctly. Add another one. It will test that it navigates to root on header title click.

[00:59 - 01:07] Here we planned out the tests we are going to write using the to do syntax. This syntax allows you to write only the test case name and omit the callback.

[01:08 - 01:24] It is useful when you want to list the aspects that you want to test, but you don't want to write the actual tests yet. Add the imports, import header, from header and import fire event from testing library react.

[01:25 - 01:41] Now let's mock the cart widget. Just mock cart widget, pass in the mocking function and here we'll return the mocked module name cart widget. And it's going to be a function that returns div with text cart widget.

[01:42 - 01:56] Now let's test that the header renders correctly. Add a callback. Here we render with router const container equals render with router. We pass in a render function that will render our header.

[01:57 - 02:09] Expect container inner HTML to match goblin store. So here to test that we have rendered our header, we verify that the title is there.

[02:10 - 02:17] Let's also verify that we've rendered our cart widget. As you remember, we've mocked it. Now it renders the div with text cart widget.

[02:18 - 02:28] So we can just check that the container will contain the text cart widget. As you can see, the test is still passing. Let's implement the second test case that will test the navigation.

[02:29 - 02:38] Add the callback. Here we want to get the methods get by text and history. We'll use get by text to find the element that we're going to click.

[02:39 - 03:01] We get them using render with router, pass in the render function, header. Next we fire event click. We simulate click on the element that we get by text goblin store. After we've clicked on this element, we expect that the history path name should be equal root.

[03:02 - 03:11] Expect history location path name to equal root. All right, and both tests are passing. Let's test the cart widget.

[03:12 - 03:22] This component displays the number of products in the cart. Also, the whole component acts as a link. So if you click on it, you will get redirected to the cart summary page.

[03:23 - 03:31] This component also uses the cart SVG. So this is why it has the dedicated cart widget folder. Let's create a test file.

[03:32 - 03:45] Inside of the cart widget folder, create cart widget spec dsx. Define the describe block. Describe cart widget, pass in the callback and define two it blocks.

[03:46 - 03:59] For now, let's use that to do syntax to skip the callbacks. It to do. We plan the test that will verify that it shows the amount of products in the cart.

[04:00 - 04:16] That's the first piece of functionality. Next, we need to test that if we click on the cart widget, it will navigate to the cart summary page. Let's add another to do. Navigate to cart summary page on click. All right.

[04:17 - 04:27] Let's set the imports. We'll need the cart widget component for event method from React testing library and use cart context from the cart context folder. We already know how to test the navigation by click.

[04:28 - 04:37] Let's write a test that will check that we will get redirected to the cart summary page when we click the widget. Remove that to do keywords from here and add a callback.

[04:38 - 04:45] First, let's mock the return value of the use cart context. To write this test, we will need to mock the use cart context.

[04:46 - 04:57] Just mock cart context, pass in a callback. Here we mock use cart context using just a fan. Now we need to deal with the types for it.

[04:58 - 05:07] Conced use cart context mock equals use cart context. And here we'll be able to specify the type.

[05:08 - 05:28] It's a bit tricky because if you just try to do as just mock partial return type of use cart context that will basically make mock partially conform to the return type of the use cart context mock. You will get an error.

[05:29 - 05:40] So we'll need to additionally cast it to unknown first and only then to the mock created from the return type of the use cart context. We have the mock. Now let's continue with our test.

[05:41 - 05:49] Use cart context mock. Here we call mock return value. We can do it because we've defined it as just a fan.

[05:50 - 05:59] We are passing an object with field products. That is an empty array. We don't care if there are any products in the cart. If we want to test that, if we click on it, we will go to the cart page.

[06:00 - 06:15] Now we get the functions get by role and history using the render with router and passing their render function with cart widget. Next we need to click the link fire event. Click.

[06:16 - 06:32] There is only one link in this element so we can use get by role and pass in link as a type. Expect that history location path name will be equal to equal cart.

[06:33 - 06:44] The get by role selector that we've used here uses the area role attribute to find the element. Some elements have the default area role. For example, a elements have the link role.

[06:45 - 06:52] You can find the complete list of default area role values on what we G site. In the meantime, our test is passing and we can continue with the second one.

[06:53 - 07:04] The test the amount of products in the cart. Add a callback. Here we cannot mock the return value of the hook as an empty object because we actually want to test that the amount will be represented correctly.

[07:05 - 07:25] So we mock the value use cart context mock mock return value as an object that has products with one product. Here is going to have name product full price zero and image image PNG.

[07:26 - 07:53] Alright, now we can get the container const container equals render with router , render the cart widget here, cart widget and then expect that container inner HTML is going to match one because we've sent one product there. It is always a good idea to verify if your test could fail. Let's see what happens if we pass two instead of one. The test fails. That means that we were actually testing something.

[07:54 - 08:13] Loader component. Our loader doesn't actually contain any logic. So our test will be quite simple. Create a new file. Loader spec. TSS. Describe. Loader. The only thing that we are going to test here is that it renders correctly. It renders correctly.

[08:14 - 08:35] Passing the callback here, get the container from the render. We don't even need to use the render with router because it's a very, very simple component. Render the loader. Don't forget to import it and import the render function from testing library. Now we expect container inner HTML to match loading.

[08:36 - 08:37] Alright, and the test passes.