Testing React Applications, v2 Test a Form Component 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 "Test a Form Component Exercise" Lesson
[00:00:00]
>> Kent C. Dodds: Okay, so this is about as raw as you can get for testing. And that's where you're gonna start with your tests. We're also going to take a break for lunch, right? Lunch is here. Okay, so let me just intro you to the login, a component that you're gonna be testing.
[00:00:19] And I'll set you off for that and lunch. So if you look at the bottom of my screen, I forgot to mention this. That is where I am, what file I have open. And so if you're ever like, where is he? That's where. So client/source/components/_tests_/login and then the file name, login.step-1.todo.
[00:00:39] So that's where you should be. And the file that you'll be testing is this login right here, so let's look at that really quick. The login renders the div that has a form in it, and that form has an onSubmit. That onSubmit calls your on submit props, so you'll be providing that.
[00:01:00] You can make adjust function for that and then make some assertions on that. And then you have this label, these inputs, it's just a username and password. And so your job is render this, fill in the username and password with something, and then trigger the submit, like I had in my example.
[00:01:25] If you get stuck at any point and you're like, what, how did he do that? Just look at the non to do version, reference it really quick, and then move back. Don't spend more than a minute struggling with something that's specific like that. This is mostly just to get you feeling how to write these tests.
[00:01:49]
>> Kent C. Dodds: So yeah, I also have comments in here for tips on how you can write these tests and things too. Yes?
>> Speaker 2: Would you mind leaving your example of that editor test up over lunch?
>> Kent C. Dodds: Sure, yeah.
>> Speaker 2: I was kinda following along and I missed a couple things, I'd like to make sure I understand it before.
[00:02:06]
>> Kent C. Dodds: Yeah, let me make it fit more on a single screen thing here. Something like that, here, rats.
>> Kent C. Dodds: Yeah, something like this. [SOUND] There you go. Something like that. Hopefully that is helpful.
>> Speaker 2: Do you mean to have the minus?
>> Kent C. Dodds: The minus?
>> Speaker 2: The minus in front of the test?
[00:02:34]
>> Kent C. Dodds: Thank you, [LAUGH] minus test. And actually, you don't need to see the mock anyway or the flush promises, so actually this is probably all that you really care to see. Yes?
>> Speaker 2: Maybe I missed it, what was it that made API a mock?
>> [INAUDIBLE]
>> Kent C. Dodds: So it was this jest.mock, is that what you're asking about?
[00:02:56]
>> Speaker 2: Line 3.
>> Kent C. Dodds: Line 3, yeah. So a jest has this really cool, here let's see. How mocking works in jest? I've got this repo, kent, there it is. How jest mocking works. That explains what's going on because I saw this and I was like,now, hold on a second.
[00:03:18] I'm importing it first and then I'm mocking it. So I investigated a little bit and then I made this demo repo to explain how that's all working.