Incorrect behavior after set injectGlobals: false in jest config
krutoo opened this issue ยท comments
"@testing-library/react": "^14.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
Relevant code or config:
I'm trying to switch from injected globals to import needed functions from @jest/globals
i just add insectGlobals: false
in jest.config.ts
What you did:
I added needed imports to test file and tests fails with errors like:
expect(received).toHaveLength(expected)
Expected length: 0
Received length: 1
What happened:
errors are reproduced only if there are two or more tests
it looks like the render result is not reset and they are rendered into one document
Reproduction:
Here an repo with example of incorrect behavior
https://github.com/krutoo/testing-library-react-jest-no-inject-globals
if injectGlobas == undefined | true
there is no problem
it has same behavior in Bun test
I encountered the same problem with vitest (config.test.globals
true
/false
)
This seems to solve it in vitest - please check if something similar works in Jest / Bun test:
// vitest.config.ts
export default defineConfig({
// ...
setupFiles: ['src/testing/setupTests.tsx')]
});
// setupTests.tsx
import { cleanup } from '@testing-library/react';
import { afterEach } from 'vitest';
afterEach(() => cleanup());
Jest has setupFiles and setupFilesAfterEnv, I'm not sure which one you would need.
Bun has bun test --preload ./setup.ts
(1).
The reason this happens: with injectGlobals: false
, there is no global beforeEach
(duh), so react-testing-library would not know which beforeEach to call, as it is testing framework agnostic (i.e. you can use it without jest).
@leonadler thank you for workaround
i will try to use this solution but
i think that it is need to be fixed in testing library
It can't really be, is what I'm saying - You might be using jest, or Bun (so you yourself are already using 2 test runners!), I am using vitest, someone else might be using mocha, ava, ...
React-Testing-Library would have to probe every test runner that exists, and would have to know which test runner you are using, which it can't - unless there is a beforeEach
global, which you are disabling with the injectGlobals: false
.
They could add a section about it in the readme, I would agree - but they can't detect your testing framework if you basically configure it to canBeDetected = false
.
Hi @krutoo, thanks for opening this.
As written in the docs for cleanup
:
Please note that this is done automatically if the testing framework you're using supports the afterEach global and it is injected to your testing environment (like mocha, Jest, and Jasmine). If not, you will need to do manual cleanups after each test.
Since there's no afterEach
, no cleanup
is being called. If you believe this phrasing isn't clear enough, we're open for PR's in our docs repo.
I'm closing this one because as already written here by @leonadler, we can't have dedicated code for each test runner nor we wan't to inject an afterEach
if it's not injected because that's too invasive.
@MatanBobi Sorry if this entirely the wrong place to ask, but next to the code that does beforeEach
, you have this part:
// This matches the behavior of React < 18.
let previousIsReactActEnvironment = getIsReactActEnvironment()
beforeAll(() => {
previousIsReactActEnvironment = getIsReactActEnvironment()
setReactActEnvironment(true)
})
afterAll(() => {
setReactActEnvironment(previousIsReactActEnvironment)
})
Do I understand correctly that with React >= 18 this is not necessary anymore? Or do consumers with setGlobals: false
have to also do this beforeAll()
+afterAll()
logic?
@leonadler AFAIR, IS_REACT_ACT_ENVIRONMENT
wasn't available before React 18, what React did before was testing if typeof jest === 'undefined' so this code is 100% relevant for React >=18. If consumers use
setGlobals: false`, they should do this on their own. I'm hesitating if we should write this in the docs too.
Ok, thanks - just FYI, with TypeScript this gets a bit unwieldly and awkward, so maybe the module could export getIsReactActEnvironment
, setIsReactActEnvironment
? ๐ค : (I can do the PR)
// my-project/external-modules.d.ts
declare module '@testing-library/react/dist/act-compat' {
export function getIsReactActEnvironment(): unknown;
export function setReactActEnvironment(env: unknown): void;
}
// my-project/setup-tests.ts
import { cleanup } from '@testing-library/react';
import { getIsReactActEnvironment, setReactActEnvironment } from '@testing-library/react/dist/act-compat';
// ^ meh ๐
import { afterAll, afterEach, beforeAll, beforeEach, vitest } from 'vitest';
let previousIsReactActEnvironment = getIsReactActEnvironment();
beforeAll(() => {
previousIsReactActEnvironment = getIsReactActEnvironment();
setReactActEnvironment(true);
});
afterEach(() => cleanup());
afterAll(() => {
setReactActEnvironment(previousIsReactActEnvironment);
});
I understand.
Can you please open a feature request for this one so we'll be able to discuss it first? This is really an implementation detail that I'm not sure we want to be exported as part of our public API (or maybe not in this specific form).
can package log some warning message about inability to apply automatic cleanup when afterEach is undefined?
@krutoo I've created a PR to add a warning in that case.
@krutoo - This PR was reverted because it created too much problems for our users. We'll re-circle it to see if there's a different approach to do it.
@MatanBobi Is there a new issue to track this?
@MattyBalaam - I just opened one: #1257