Cleanup
Loading "Proper Dom Cleanup for Reliable Testing"
Run locally for transcripts
π¨βπΌ So, Kellie π§ββοΈ put together the rest of the tests for our component, but we've
got a bit of an issue... The tests look fine, but they're not passing. π±
What's more, if you run the tests individually, they pass! It's only when you
run them together that they fail. π
But you know what that means right? It means that we've got a cleanup issue. π§Ή
π€¦ββοΈ
π¦ You can use
test.only to run a single test (adding it to multiple tests
will run only the ones that have it). You can also use test.skip to skip a
test (adding it to multiple tests will skip all of those). Another helpful thing
at identifying the failing test is to change the order of the tests. Give these
things a try! If you add test.only to a failing test and it starts passing,
you know that some other test isn't cleaning up properly. If you add
test.only to a passing test and it starts failing, you know that some other
test is setting up state that it depends on!π¨βπΌ Something you should know about Testing Library's
render function is that
it wants to help you write code that follows our guiding principle:The more your tests resemble the way your software is used, the more confidence they can give you. - @kentcdodds
Well, when our UI components run, they're put into the
document.body. So
that's what render does. The problem is that we never tell it to remove those
elements from the document.body when we're done. And screen queries are
looking for everything that's rendered on the screen.So when the first test runs, it sticks stuff in the body, then the next test
runs and sticks more stuff in the body and when
screen looks for the list
items it finds the old ones too!Normally, Testing Library actually adds a
afterEach hook to automatically
cleanup after itself so you don't have to think about this. But we've opted to
not use global test variables and instead those have to be imported, so Testing
Library doesn't do that automatically.Whether we should just switch to global test variables is debatable, but the
fact is we're not so we need to set up the cleanup ourselves.
Luckily, it's really easy. I'll let Kody guide you through it.
