Testing React Applications, v2 Writing a React Test & Exercise
This course is no longer being maintained. We recommend the testing section of the Intermediate React course instead. We now recommend you take the Intermediate React, v5 course.
Transcript from the "Writing a React Test & Exercise" Lesson
[00:00:00]
>> Kent C. Dodds: So, in the context of React, we can write these JavaScript tests. The idea behind it is to try and use our code, or our components, in the same that they'll be used in the application. And so if you open up the other directory, simple-react, we'll just get started with this item list component here.
[00:00:31]
>> Kent C. Dodds: So it's a pretty simple component. It's just a function component. And you pass items prop. And if that items prop has a length, then we'll render some ul's and li's of all those items. Otherwise we'll render no items. And then in this __tests__ directory, we have an item-list.todo, that's where you need to do your work.
[00:00:55] And here I have a bunch of comments on what you need to do to test this. So I'm gonna throw you in the deep end with these comments as your life jacket. And you can go ahead and try to make this work. Actually have some tests to verify that this thing is rendering the list of items if there are items.
[00:01:19] And then the string No items if there aren't any. And then we'll come back and I'll work through the solution. So to run this, this I'm pretty sure it is npm run test simple. I need to look at my list. It's test react. npm run test:react. And that will start your jest watch mode, running these tests.
[00:01:50] You can just leave it like it is and make a change to this file. And it'll pick up that change and start running the tests in there. I'll give you a little tip. So if you haven't had any experience with testing before, this is probably helpful. This is what a test looks like.
[00:02:14] Title, and then here's your code for the test. You'll have the shape of a test is, arrange, act, and assert. So you should have code that gets things ready for the test. So you're rendering the thing. And then you perform some sort of action. In this case there's not any interactivity, so there's not much for the action there.
[00:02:39] And then you make assertions.