Test Component Rendering with Jest and Testing Library
As the core unit of functionality in a React application, our components should be tested. Using Jest and Testing Library, we can render our individual components right in a test context and make assertions about their rendered output and behavior. Tests are a great way to work through API decisions, provide living documentation for your code, and to allow for confidence when refactoring. In this lesson, we'll create an initial test to verify the initial rendered output for a component, given specific props.
Andy Van Slaars: [00:00] I'd like to write some tests for this cardPreview component. Luckily create-react-app ships with Jest and React Testing Library. We have all the tools we need already set up for us. Let's start by creating a file right next to our component file in the components directory. I'll add a new file, and I'm going to call this cardPreview.spec.js.
[00:21] I'll start by importing React from react, and I know I'm going to import the render function that's provided by React Testing Library, so that's @testing-library/react, and then I'm going to import the component that we want to test. Import cardPreview, and I'll just give that the relative path.
[00:55] Now let's define our first test. I'm going to drop down a couple lines, and I'm going to start with an it statement, and I'm going to describe my test, so I'm just going to say it renders the expected term. Then I'm going to give that a function to execute our test, and I'll start by defining the expected term as a constant, and I'll just give this a test value, and then I want to render the component, passing this expectedTerm in as the term prop.
[01:26] For that I'm going to use the render function from testing-library. This render call is going to return an object which has a bunch of query functions on it, so I'm going to destructure this to get the getByText query that's returned from this render. I'll do getByText then I'm going to pass it expectedTerm. I'll save this, and then in the terminal, going to run this with yarn test, and we'll see that our test is passing.
[02:11] Now let's go back into our code and make sure that this test will fail, because if it would never fail, it's really not a valuable test. I'll get the terminal out of the way, I'll come up here, and instead of passing in the matching term, I'm just going to give this a temporary value, just to see if the test will fail. I'm going to save this, and our tests are going to run because they're running in a watch mode.
[02:32] We'll see down in the terminal that it will rerun our tests, and now we have a failing test. The reason this fails is the getByText will throw an exception if it doesn't find the text that you've asked for. We can make this a little more explicit, even though this is still a valid test. We can use Jest's expect around this, and then we can expect the result of getByText to be in the document.
[02:57] I'm going to save this, our test will rerun, it should still fail, and then if I come up here and I correct the term by passing in the appropriate value, and I save, now we have a passing test again. I just want to point out, this toBeInTheDocument matcher is actually coming from this jest-dom/extend-expect call that is included in the setupTests file that's added when we run create-react-app.
It may help to re-iterate that getByText implicitly means "get this element by the text I'm passing in".