How to Test React Navigation Components With Jest Helper

[00:00 - 00:57] Just helper to test navigation. If you open SRC app.tsx file, you will see that our app component renders four different routes using SWITCH. Aside from the root route , where it renders the home component, it also renders the checkout, cart, and order routes. We can test those routes as well, but we'll end up with a lot of duplicated code. All those routes tests will look like the root route test. The only thing that's going to be different is the URL and the expected strings to render. Let's create a helper method to render components with the router. Global helper with TypeScript. First of all, create a new file , test helpers, TSX. Inside of this file, we'll define the render with router helper function. We'll define it on the global namespace. Global render with router is a function that receives the render component. That's a function that will render our component that we 're testing.

[00:58 - 02:29] And the route inside of this helper will define the history using create memory history. We'll check if the route exists or is defined, then we push it to the history. And we return the results of calling the render method. We import it from React testing library. And there we pass a router with the history. And inside of it, we call the render component function, render component. So we want to return all the values that the render function returns. And on top of it, we also add the history object history. So as you can see, we got a bunch of errors. First of all, the property render with router does not exist on type global or type of global this. That's one problem. Let's fix it. First of all, we'll define the type of our render with router function type render with router is a function type that returns render result. We can get this type from react testing library, plus history of type memory history. We get this type from the history module. Our render with router function will accept render component and the route render component is a function with no arguments. And it returns react node. This is a type from react. And the route is an optional field of type string. Now we need to tweak the global type a bit. Declare global.

[02:30 - 03:39] The global namespace contains the node JS namespace namespace node JS. It contains interface global. And if you define an additional field on it, it will merge it with all the other fields defined on the global interface. We need to add render with router of type render with router. Great. Now, first of all, the error regarding missing render with router field is gone. And now we should be able to call global render with router. Here we pass a function that will render some component. Let's say it's just a div some component and the route. That's good. But we don't want to always have to use global when we call render with router inside of our tests to make it possible to call render with router directly will have to tweak the global this definition. We can do this by adding an override for the namespace global this, where we add a const render with router of type render with router.

[03:40 - 04:02] Now we should be able to call render with router directly render with router. We pass in a render function. Let's say here we render a fragment and then we pass in a route and we don't get any errors. Go to setup tests and import test helpers. Now you should be able to use render with router inside of your tests.