React-testing-library: Have render call cleanup

[Gpx]

Describe the feature you'd like:

Right now we have to call cleanup before each test. This tends to be confusing for beginners especially if they come from other libraries (Enzyme) that do not need this step. It would be good if render could call cleanup automatically.

Suggested implementation:

I didn't dig into the code too much but it should be as easy as having render call cleanup as the first thing it does.

Describe alternatives you've considered:

I'm trying to think about a use-case where you might want to run two renders in the same test or where you might want to manually run cleanup—which would invalidate this idea—but can't come up with anything.

Teachability, Documentation, Adoption, Migration Strategy:

We would have to remove the documentation about cleanup. Potentially we would have to introduce a breaking change.

[threepointone]

If render called cleanup automatically, what would you make assertions on? :) The application would unmount and the dom element would be removed.

[kentcdodds]

I think the suggestion is to call cleanup _before_ rendering. I'm considering this... I'm leaning toward "no" because it violates the principle of least surprise. But I want to hear what other people have to say.

[Gpx]

Yes, I meant calling cleanup before doing any rendering

[weyert]

I was wondering how this would affect the rerendering of components?

[kentcdodds]

I guess we'd need to make sure that calling rerender would not call cleanup.

[alexkrolick]

🤔 I like the idea of reducing the amount of setup required...

• It would have to check the container and baseElement identities before cleaning up
• rerender would have to not do this

This might make sense at a higher level of abstraction like the const page = visit('/route') thing @mxstbr demoed, where render is basically equivalent to a page refresh

[threepointone]

Let’s say a component has a bug where unmounting throws an error (the effect cleanup is bad, eg). Then this feature would make the next test fail, and debugging would be a pain.

Not sure if this is worth the short term gain, tbh. The ‘fix’ should be figuring out how to automate cleanup.

(As an example, why not “import ‘cleanup-after-each’” by default on importing rtl?)

[kentcdodds]

(As an example, why not “import ‘cleanup-after-each’” by default on importing rtl?)

I've considered that. If we made cleanup-after-each work in non-jest environments then I'd be 👍 for that I think.

[alexkrolick]

non-jest environments

👆

[kentcdodds]

The more I think about it, the more I think this makes sense. I'm totally open to seeing a PR for this.

[alexkrolick]

Let’s say a component has a bug where unmounting throws an error (the effect cleanup is bad, eg). Then this feature would make the next test fail, and debugging would be a pain.

This seems like a big deal though.

[kentcdodds]

It is a big deal. What Sunil suggested and what I want is for import 'cleanup-after-each' to happen automatically when you import @testing-library/react (and to do some typeof afterEach checks so it doesn't break in other environments).

[alexkrolick]

👍 misread what "this" meant in "this makes sense"

[alexkrolick]

import 'cleanup-after-each' to happen automatically when you import @testing-library/react (and to do some typeof afterEach checks so it doesn't break in other environments)

One additional thing to confirm is that this works if you have a custom test utils file that imports and re-exports from RTL.

[kentcdodds]

Yes, definitely would work with that

[kentcdodds]

Alright, I feel really great about this. Made #430.

[kentcdodds]

I'm thinking this'll happen soon. Will require a major version bump though 😬

[kentcdodds]

:tada: This issue has been resolved in version 9.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: