Testing React Applications, v2 Using DOM Events Solution

Transcript from the "Using DOM Events Solution" Lesson

[00:00:00]
>> Kent C. Dodds: Okey-dokey, so that was a fun exercise, right? So let's go ahead and we'll re-factor from render into documents. So that we can actually click on the button and get that submit to happen. So this isn't necessarily any better than what we had before. But I think most users are gonna be clicking on the button, and so that's kinda why I wanna test it that way.

[00:00:26] So I'm gonna call this render into documents. And then we'll just do the same thing. Render into documents, very, very small. API on top of render and all that it does in addition is append to the container to the document body. And with that, it allows us to take that submit button node and click on it.

[00:00:52] That's just a regular dom API and then we can get rid of this cuz if it actually doesn't submit, then we know that its type is submit. Or at least it works. It doesn't matter that the type is submit, just the fact that it works is good enough for us.

[00:01:05] And our tests are still passing, especially because we're not running the right ones. So let's run [LAUGH] the right ones. Login.step-3.todo, okay, good. Now are tests are still passing. Let's make sure that they can fail, just to be totally sure that we're running the right ones. Cool, this means we don't need the container any more, but here's a little bit of a problem.

[00:01:29] At the end, we console.log document.body.innerHTML. And we'll see that it has our form in it, and there's nothing in there cleaning it up. So if we had another test, and we put this in there, the document body is still messed up, right? So there are a couple of ways we can deal with this.

[00:01:52] We could pull the unmount utility out here, and then call a mount. And that'll pull it out, so now it actually unmounted the component but it didn't actually remove the container. So unmount doesn't do anything about the container. It just makes the component itself unmount. So if we really wanna clean everything up, we could do document.body.enterHTML equals empty strain.

[00:02:19] And then we fix everything up. Or we could just have a testing library that is really useful and we have it after each cleanup. We'll pull that cleanup from the react-testing library. Then that cleans everything up for us nice. So if you're going to use render into document which is a handy method, then it's pretty recommended that you also have this after each here too.

[00:02:51] One other thing about this is sometimes a click event isn't enough or the click method isn't enough, and you want to simulate a mouse over or something like that. Or sorry, you don't wanna simulate it. You wanna fire an actual event, then you can pull in fireEvent. And this will do that new window.event here's the type.

[00:03:15] And it has a similar API to simulate. And so we could do fireEvent.click. We're gonna fire that event on the submit button node. So that's another way that we could go about doing that.