Render a Component Using the React Testing Library

Instructor: [0:00] We want to start with a test called shouldRenderPage. In this scenario, we want to render a page. Obviously, we're going to be needing our app, which is going to be a page where our code is. For us to be able to render this, we need to use a function from the React testing library called render. Let's import it.

[0:15] In order to use render we need to pass it to our component. For us to do so we need to call render and then pass it to our app component. What this will do is render our component into a container which will be appended to a document body. Let us now check this test running.

[0:29] As you can see the test has passed because there's no assertion being done, so Jest will just assume that everything is OK with your test. Besides allowing you to render your components, the render function also gives you some utils that you can use to improve your testing experience.

[0:44] Let's see which things we can destructure from render. The first thing we are destructuring from render is the container. Now this is the container where the render function will render our component after we invoke it. Container will be pretty much useful when we get to querying later on.

[0:58] The second thing we destructure from render is the unmount function. The unmount function allows you to pretty much simulate and mount events, to unmount your component. This is pretty useful when you have scenarios that you want to assert that all the things that you are doing when your component unmounts are actually working.

[1:14] The third thing we destructure from render is the re-render function. The re-render function allows you to force your component to re-render manually. The use-case for this would be if you have a scenario that you want to check when props change, what happens to your component.

[1:28] Now, you have to be careful if you decide to do this because this is considered to be an implementation detail, and this is actually something that the testing library doesn't encourage.

[1:37] Last but not least, we are now destructuring debug. Debug is the thing that we'll be seeing now how it works, so let's call it. As you can see, debug allows you to see a pretty printed version of how your UI looks. Finally, we don't want our test to end without an assertion, so let us add one.

[1:53] What we're going to do is leverage the container where the render function rendered our component, and by using a just DOM matcher called toBeEmptyDomElement, we're going to check if this container is not empty.

[2:04] If we re-run our test, you're going to still see a pretty printed version of the UI because the debug function is still running, but you're going to see that our test has passed. This means that indeed the render function is working successfully.