testing-library
Jest's afterEach(cleanup) when rendering svg's causes Error: Uncaught [TypeError: this.node.getScreenCTM is not a function]
@testing-library/reactversion: 13.3.0- Testing Framework and version: [email protected], [email protected], [email protected]
Relevant code or config:
// in app.test.js
import '@testing-library/react/dont-cleanup-after-each';
afterEach(cleanup);
it('renders the app without errors', done => {
render(<App />);
});
app.js renders an svg chart. (Apexcharts)
What you did:
Ran npm test
What happened:
Error: Uncaught [TypeError: this.node.getScreenCTM is not a function]
Problem description:
When I setup cleanup with jest either through its automatic feature or by turning it off and calling it manually in 'afterEach'.
afterEach(cleanup);
The code breaks.
If I use:
// in app.test.js
afterEach(() => {
setTimeout(() => {
cleanup();
}, 1);
});
Things work fine.
Suggested solution:
For some reason, cleanup seems to be called prematurely (before all the unmounting events?). The solution needs to play well with jest's afterEach mechanism and cleanup.
Thanks for opening this one @rodpatulski.
If I understand correctly, we're not awaiting for the unmount, we're just calling root.unmount() so what you're experiencing seems reasonable. There's probably something happening on unmount of Apexcharts.
From a first look at the repo, it looks like it's using class components so I highly doubt they support React 18.
I highly doubt they support React 18.
I forgot to mention that this was happening to me as early as react 16. (I recently updated to 18)
Seems like something is not cleaning up properly during unmount. Without knowing the full source, we won't be able to know where the issue is coming from. Try to remove as much code as possible until it no longer reproduces and share that either via codesandbox or a cloneable repository.
Here's a repo that recreates the problem: Run npm test to recreate. https://github.com/rodpatulski/bug-jest-cleanup
afterEach
@rodpatulski In the README you write
Uncomment afterEach(cleanup) line to see that the test passes without cleanup.
But I can't find that line. Are you sure you included all the relevant code?
Sorry, forgot to push a commit. The 'afterEach(cleanup) is in app.test.js ln 7.
Since this relies on a 3rd party library (react-apexcharts) I would suggest filing an issue against their repository first. Or try to reduce the repro to code that's not using 3rd party code.
Check out https://stackoverflow.com/help/minimal-reproducible-example for a comprehensive guide on creating reproductions.