How to Test an Order Summary Page in React

[00:00 - 00:08] Order Summary page. This page fetches the order information from the backend by order ID and displays the products included in the order.

[00:09 - 00:24] It gets the order ID from the current location query parameters and makes requests to the backend using the API module. To test it, let's create a new file as for C, order summary, order summary, spec, TSX.

[00:25 - 00:37] Here we add a top-level describe block saying order summary, we'll be using m ocks so it makes sense to define after each that will clear all the mocks. First let's define the case when the order data is being loaded.

[00:38 - 00:45] Here we'll want to test that it renders the order. The next case is when the order is loaded.

[00:46 - 00:56] Here we want to render the order info, it to do renders order info. And also on main page button click it should navigate to the main page.

[00:57 - 01:05] It to do navigate, navigate to main page on button click. Here is this button back to the store.

[01:06 - 01:12] If you click it, you will end up on the main page. And then without the order, it should render an error message.

[01:13 - 01:21] Let's mock the use order hook first. Here we only test the component so we can abstract the use order logic.

[01:22 - 01:40] First we can define the use order hook, use order, we mock the use order hook to be just FN. Specify the type, define the use order mock by casting use order first to unknown and then to just mock from partial from return type of the use order hook.

[01:41 - 01:48] Don't forget to import the use order hook from the use order module. Now we can define the loading state, remove the to do and add the callback.

[01:49 - 01:54] Here we first mock the return value of the use order mock. Is loading should be true and the order undefined.

[01:55 - 02:01] Render the order summary to get the container. Container equals render order summary.

[02:02 - 02:11] And then expect that container inner HTML will match loading. Make sure that the test is passing, everything is fine.

[02:12 - 02:21] So we can move on to the when order is loaded case. First of all, add a before each block where we'll mock the use order mock return value.

[02:22 - 02:33] Here we want to make sure to set the ease loading false because the order is already loaded and we want to have the order object. It should have products array and it's enough that it has only one item.

[02:34 - 02:48] Now remove the to do from the renders order info at the callback. Render with router the order summary component const container equals render with router passing the order summary.

[02:49 - 02:57] Expect container inner HTML to match the product name. In our case product full.

[02:58 - 03:06] Now we can test the navigation to the main page, remove the to do add a callback. Here we can copy part of the test of the renders order info.

[03:07 - 03:21] But here we also want to get the history fire event. Click on get by text back to the store get by text instead of the container and import fire event from react testing library.

[03:22 - 03:33] Now we can expect that history location path name is equal to root. We should navigate to the root page, wait a bit and the test should be passing.

[03:34 - 03:55] The last one should test that if we get an error, we render its message at the callback return is loading false and order undefined. Get the container by rendering the order summary and then expect container inner HTML to match couldn't load order info.

[03:56 - 04:01] Wait for the test to complete and it passes. At this point we've tested all the components that our app has.

[04:02 - 04:02] It's time to test the hooks.