00:00 So, we've got a failing test. Let's take a look at what that failing test looks like. So, it shows nothing when given an empty list. That works. Shows a single error, and then once we say shows multiple errors, then that's a problem. Now, you might think at first glance that, okay, so this test is the one that has the problem. But check this out.

00:16 If I say, alright, I want to do this one only, dot only, that, and now it's suddenly passing. That is a great sign that you are not cleaning up after yourself in another test. If it fails when it's run with other tests, but then succeeds when it is run by itself,

00:32 then you're not cleaning up after yourself. Another situation that can happen is if it succeeds when it runs with all the tests, but fails when it runs by itself. That means that your test relies on state that's set up in another test. Again, you're not cleaning up after yourself properly. And so that's what's going on here.

00:48 If we add a screen.debug to the first line of this shows multiple errors, we're going to see that we've got a div right here. So that's the spec. That's the div that's created from this first render. And then we've got another div right here. This is the container for

01:04 this second render call. And so by the time we get to this render call, we're going to have three divs. If I move this down there, then we can take a look at that. We've got the second one, and then here's the third one. And so when we're looking for all of the list items, we're going to

01:20 get this one in addition to these two. And that is what's causing our error. So we just need to make sure we clean up after ourselves. And there's an easy way to do that. With Testing Library React we say clean up. And then you can call clean up at the end

01:36 of each one of these. And we'll await clean up. And await clean up on both of those. And now this test will pass. And of course you'll want to do that on all of these. But we need to do

01:52 I don't want to have to do that at the end of every one of my tests. And of course if the test fails then the clean up will fail as well. So we're going to add an after each after each from vTest and we'll call clean up there. You could also do it this way if

02:08 you so desire. And what that is going to do is automatically clean up after every one of our tests so that we're totally clean by the time we get to every single one of our tests. Which is exactly what we want. So with that now when we

02:24 do a screen debug the body is totally empty. Now another thing that I want to show you really quick as a part of this is just that we have another utility. Just like our screen.debug we have another utility that we can use that can be kind of helpful. It's called

02:40 screen.logTestingPlaygroundURL. And with that it logs this URL that you can copy and open it up in a browser and it will take the DOM and stick it in this

02:56 input right here. And then it will render that right over here and then you can click on those things and it will give you a suggested query for you. Autocomplete that in there and even tell you if there's a better one to be had. And so

03:12 it's a pretty cool tool that will make it a little bit easier since we don't have a real browser environment as we're testing in JSDOM. So that is logTestingPlaygroundURL. Another thing that I'll mention is that some of you might be a little confused if you've used Testing Library before

03:28 because you've never had to do this cleanup before. And that's because Testing Library React will actually look for a global after each or a global teardown and if that does exist then it's going to register this cleanup for you automatically. We have VTest configured to not

03:44 set all of these values as global because I actually like that I could execute this file as is and not have to do any global setup for these global variables. That's an intention on my part to not make

04:00 these things global and because we don't do that we have to set up this cleanup ourselves. Which definitely is a bit of a drawback but I think that it's worth the effort especially since it's not a whole lot of effort because we can literally just take

04:16 this and move it over to our setup test environment and we just stick that right here and bring in cleanup and bring in after each and now I can just delete this here and delete that there and the whole thing still works.

04:32 And so it's not a whole lot of extra work to deal with the fact that we're not doing things in a global context and to me that's totally fine. So there you go. That is doing cleanup for a testing library to make sure that your tests are all isolated from each other.