Enzyme: Enzyme not unmounting by itslef

[hakunin]

Hi, I noticed that Enzyme doesn't unmount the components I mounted after each test.
In my case, they will listen and react to stuff, thus the test gets slower and slower.

Are we supposed to do it manually?
I'd expect a high level library like Enzyme to unmount everything at the end of each test.

Without unmounting:

With unmounting its plenty fast but I get errors from the unmount code

I tried clearing the timers in the afterEach() function where I try to unmount but it didn't help. Any ideas?

[ljharb]

Yes, you're supposed to do it manually.

It would be impossible for enzyme to know when your test is over, or even that you're writing a test at all.

Your component probably needs to clean up after itself in componentWillUnmount.

[hakunin]

It would be impossible for enzyme to know when your test is over

How about afterEach? Does that not mean the test is over?

[ljharb]

It is impossible for enzyme to know that any of its code is running in an afterEach, for example. Obviously your test is over inside the afterEach, but only you know that - not enzyme.

[hakunin]

I don't follow. Are you saying Enzyme can't add afterEach callback that would cleanup the mounted components?

[ljharb]

Yes, because enzyme doesn't know you're using mocha, or any other test framework. afterEach doesn't exist in every test framework, it exists in the one you chose to use.

[hakunin]

then a simple enzyme.cleanup() in a global afterAll hook would still work, or even something like enzyme.init(jest), but I will simply create a wrapper myself :) thanks for explaining it

[ljharb]

Indeed, something that would be useful for you here would be a wrapper that kept in memory every enzyme wrapper that was ever created, and provided an unmount/cleanup method to clean them all up, so you could call that in afterEach.

That belongs in a separate enzyme wrapper package, but would be very useful.

[silvenon]

Material UI solved it like this (source).

[jackgeek]

I think this really belongs in the enzyme library. Its not immediately clear that you have to clean up. If there was a documented enzyme.cleanup() that would be very useful.

[cgood92]

I came across this unfortunate news today, and I have implemented a solution that seems to be working for me. I will post it here, and I would love feedback.

jest-setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import reactDOM from 'react-dom'

const attachTo = global.document.createElement('div')

class ReactAdapterWithMountTracking extends Adapter {
    constructor(...args) {
        super(...args)
    }
    createRenderer(options){
        // Provide a default option on each render for attachTo, being a global div that we can unmount later
        Object.assign(options, { attachTo: options.attachTo || attachTo })
        return Adapter.prototype.createRenderer.call(this, options)
    }
}

afterEach(() => {
    // Unmount react component after each test
    reactDOM.unmountComponentAtNode(attachTo)
})

configure({ adapter: new ReactAdapterWithMountTracking() })

[cgood92]

I made this into an NPM package for easy consumption. Now you can do the following:

npm i -d eynzme-cleanup 

And add this to your jest setup script (where you set up your enzyme adapter)

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import { cleanup, makeAdapter } from 'enzyme-cleanup'

afterEach(cleanup)

configure({ adapter: makeAdapter(Adapter) })

[jackgeek]

I've stopped using enzyme in favor of testing-library. I'd recommend the maintainers have a read of the testing-library docs. Have a look at how Kent achieved this.

You are in an eco system, not a vacuum. There are ways you can make this "just work" for the most common environments and users. Leave an escape hatch for the edge cases and advanced users.