Intermediate React

Intermediate React Testing Component Methods

Topics:
Brian Holt
Brian Holt
Snowflake

This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React course:
The "Testing Component Methods" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Learn to create a component test which tests component state and methods that interact with the component's state. Brian also verifies these tests by modifying the component logic.

Get Unlimited Access Now

Transcript from the "Testing Component Methods" Lesson

[00:00:00]
>> Brian Holt: Okay, so I wanna go a little bit deeper. Let's go back into our details.test.js. I wanna make sure that when toggle motor was called that show motor becomes toggled, right. So, you can actually do a little bit more in-depth testing here. So I'm gonna say shows modal when togggleModal is called.

[00:00:27] Okay. So I'm gonna say const c = create details and I'm gonna say search. We'll just give it an empty function, so it will happily construct itself cuz it requires one. Then, I'm gonna say const instance = c.getInstance. So, this is actually giving me back an instance of my particular element, so I can actually manipulate it directly here in node.

[00:01:06] So, if I'm gonna say thing, expect instance.state.showModal to be false Then I'm gonna say instance.toggleModal which is going to be that function that we have inside of details, just to show you again, it's this one. Line 40 here, inside the details.
>> Brian Holt: ToggleModal And I'm gonna say expect(instance.state.showModal).

[00:01:51] toBe(true).
>> Brian Holt: So basically on construction, I expect not to show the modal and then after I call toggleModal, I expect it to be true.
>> Brian Holt: Run tests.
>> Brian Holt: And you can see that should pass. Now the first thing, whenever I write a test that pass, personally something in just my own personal thing is I wanna make sure I can make it fail.

[00:02:27] I want to make sure that it fails and I expect it to fail. So an easy way to do this would be to go into Details If I turn this state wherever it is. Here. State equals showModal false. If I turn this to true we would expect it to not pass the test right?

[00:02:48] Because on construction showModal will be true.
>> Brian Holt: Lo and behold, it does fail because it's gonna fail that first assertion, then on construction, it's gonna be false, okay? One more time just to make sure we can make it fail the other way is I'm gonna make it so that I forgot this exclamation point, which is not going to flip it, right?

[00:03:12] You would expect it to fail the second assertion.
>> Brian Holt: And you can see here now it fails the second assertion.
>> Brian Holt: So expected to be true and what it received was false. Another thing I like with Jest is it gives you succinct things like this is the one that failed, like this to be assertion failed and I expect it to get true and I got false.

[00:03:40] Now with booleans that's obvious how it failed, right, but if you have like long objects of configurations, it'll give you the actual value that failed. So go back in, save it
>> Brian Holt: And run npm test again.