Tests using `@testing-library/react-hooks` fail with Jest 27

[martinfrancois]

After upgrading to Jest 27, every test which uses the method renderHook from @testing-library/react-hooks fail with this error:

    Test did not tear down console.error mock properly.

        If you are trying to disable the "fail on console" mechanism, you should use beforeEach/afterEach
        instead of beforeAll/afterAll

      at flushUnexpectedConsoleCalls (node_modules/jest-fail-on-console/index.js:31:13)
      at Object.flushAllUnexpectedConsoleCalls (node_modules/jest-fail-on-console/index.js:77:7)

We are using a testSetupAfterEnv.ts file with the following content:

import failOnConsole from 'jest-fail-on-console';
failOnConsole();

And the following jest v27 config (shortened for brevity):

  "jest": {
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleDirectories": [
      "node_modules",
      "src",
      "pages"
    ],
    "setupFilesAfterEnv": [
      "./src/testSetupAfterEnv.ts"
    ]
  },

The config for Jest v26 is the same, except that it doesn't contain "testEnvironment": "jsdom",

The error occurs with the following dependencies:

"babel-jest": "27.0.2",
"jest": "27.0.2",
"jest-fail-on-console": "2.0.4",
"@testing-library/react-hooks": "7.0.0",

The error does NOT occur with the following dependencies:

"babel-jest": "26.6.3",
"jest": "26.6.3",
"jest-fail-on-console": "2.0.4",
"@testing-library/react-hooks": "7.0.0",

[martinfrancois]

Upon closer investigation, I found the reason for the failing tests, see here: https://react-hooks-testing-library.com/installation#pure-imports It mentions console.error is patched to hide some React errors, and in fact if I replace the following import:

import { renderHook } from '@testing-library/react-hooks';

With this import:

import { renderHook } from '@testing-library/react-hooks/pure';

I don't see the error anymore, but also the side effects performed by @testing-library/react-hooks are not executed.

Is there any way to make jest-fail-on-console restore the mock if it is patched as it is by @testing-library/react-hooks, to get rid of the error?

I have no idea though why this error only occurs with Jest 27 and not with Jest 26...

Additional reference that may be useful: Code used by @testing-library/react-hooks to patch console.error Disabling console.error filtering in @testing-library/react-hooks

For anyone also having this issue, we are using the following workaround for now, by changing the jest config to:

"setupFilesAfterEnv": [
      "@testing-library/react-hooks/disable-error-filtering.js",
      "./src/testSetupAfterEnv.ts"
]

[ValentinH]

Thanks for sharing this solution. I actually faced the exact same issue a few weeks ago and solved it by using the /pure version. On my case, not having the side effect run was not an issue.

The problem is that @testing-library/react-hooks isn't using a Jest mock (they support other test runners) to patch the console so I don't know how to make an exception for it.

[pietmichal]

For people who can't use /pure module - my temporary solution is to mock error implementation in beforeEach hook in a test file.

beforeEach(() => {
  jest.spyOn(console, "error").mockImplementation();
});

[jgabriele]

My colleague @KevinHerklotz fixed it in a more robust way:

setupFilesAfterEnv: [
    '@testing-library/react-hooks/disable-error-filtering.js',
    // other setup
]

More infos here: https://react-hooks-testing-library.com/reference/api#consoleerror

Could it be an option for you @martinfrancois?

[ValentinH]

I think the answers in this issue solved it.