actImplementation is not a function

[michalstrzelecki]

• @testing-library/react version: 13.2.0
• Testing Framework and version: "react": "^18.1.0"
• "jest": "^28.0.0"
• DOM Environment: "jest-environment-jsdom": "^28.0.2"

Relevant code or config:

it("can display first 5 tags", async () => {
    render(<TagsList />)

    const links = await screen.findAllByRole("link")
    expect(links).toHaveLength(5)
  })

What you did:

I have upgraded project to react 18, jest to 28, and rtl to 13.2.

What happened:

TypeError: actImplementation is not a function
    at /var/www/node_modules/@testing-library/react/dist/act-compat.js:57:25
    at renderRoot (/var/www/node_modules/@testing-library/react/dist/pure.js:159:26)
    at Object.render (/var/www/node_modules/@testing-library/react/dist/pure.js:246:10)
    at Object.render (/var/www/src/testUtils/test-utils.tsx:79:7)
    at Object.<anonymous> (/var/www/src/components/features/ResponsiveDrawer/TagsList/TagsList.test.tsx:7:25)
    at Promise.then.completed (/var/www/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/var/www/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/var/www/node_modules/jest-circus/build/run.js:218:40)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections 

Reproduction:

Problem description:

Every test fails.

Suggested solution:

Please, provide the way to add actImplementation function.

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://react.new), or a link to a repository on GitHub.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[michalstrzelecki]

I can not get codesandbox to run my testsuite - https://codesandbox.io/s/frosty-diffie-5fb0z3?file=/src/App.spec.jsx

[michalstrzelecki]

Here is the repo https://github.com/michalstrzelecki/rtl13.
Any help would be appreciated.

[eps1lon]

Here is the repo michalstrzelecki/rtl13. Any help would be appreciated.

@michalstrzelecki How do I use the repro? npm test did not reproduce the reported error:

$ npm ci
$ npm test

> [email protected] test /home/eps1lon/Development/throwaway/rtl13
> jest --config=jest.config.ts

Error: Jest: Failed to parse the TypeScript config file /home/eps1lon/Development/throwaway/rtl13/jest.config.ts
  Error: > Couldn't find a `pages` directory. Please create one under the project root
    at readConfigFileAndSetRootDir (/home/eps1lon/Development/throwaway/rtl13/node_modules/jest-config/build/readConfigFileAndSetRootDir.js:136:13)
    at async readConfig (/home/eps1lon/Development/throwaway/rtl13/node_modules/jest-config/build/index.js:208:18)
    at async readConfigs (/home/eps1lon/Development/throwaway/rtl13/node_modules/jest-config/build/index.js:404:26)
    at async runCLI (/home/eps1lon/Development/throwaway/rtl13/node_modules/@jest/core/build/cli/index.js:140:59)
    at async Object.run (/home/eps1lon/Development/throwaway/rtl13/node_modules/jest-cli/build/cli/index.js:155:37)
npm ERR! Test failed.  See above for more details.

[MatanBobi]

@eps1lon I was able to reproduce it by just adding a folder named pages under src.

It looks quite similar to another issue we had with swc.

From a first look, it seems like when we run the import from react-dom/test-utils, jest module registry tries to import from test-utils.ts file in the repo. (It's a first look, still didn't get a chance to look into the details too much).

[michalstrzelecki]

@eps1lon I have just add .gitkeep to the pages folder. Please, pull the changes.
@MatanBobi I have put the pages folder inside the root folder.

[iuridias-imtf]

I am facing the same issue, using react-18 and following the provided example in the documentation.

TypeError: actImplementation is not a function at node_modules/@testing-library/react/dist/act-compat.js:57:25 at node_modules/@testing-library/react/dist/pure.js:261:28 at Array.forEach (<anonymous>) at cleanup (node_modules/@testing-library/react/dist/pure.js:257:22) at Object.<anonymous> (node_modules/@testing-library/react/dist/index.js:35:25)

[eps1lon]

The issue was caused by moduleNameMapper: You're saying that any test-utils maps to your test-utils. So 'test-utils' as well as react-dom/test-utils maps. The following patch fixes this issue:

diff --git a/jest.config.ts b/jest.config.ts
index 0c0e703..cd1004b 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -6,7 +6,7 @@ const createJestConfig = nextJest({ dir: "./" })
 const config: Config.InitialOptions = {
   moduleDirectories: ["node_modules"],
   moduleNameMapper: {
-    "test-utils": "<rootDir>/src/testUtils/test-utils.tsx",
+    "^test-utils$": "<rootDir>/src/testUtils/test-utils.tsx",
   },
   setupFilesAfterEnv: ["./jest.setup.ts"],
   testEnvironment: "jsdom",

[MatanBobi]

Good catch @eps1lon, I totally forgot to check the jest config :)

[michalstrzelecki]

@eps1lon thanks a lot! :)

[Deeksha123]

Hi @michalstrzelecki, I am getting the same issue in my test file. I tried to see how you setup your jest config file. Can you share the configuration. This issue is kind of blocker for me to proceed.
Thanks!

[michalstrzelecki]

@Deeksha123

const config: Config.InitialOptions = {
  // bail: true, // stop run test after one error
  // collectCoverage: true, // show test statistics
  errorOnDeprecated: true,
  coverageDirectory: "coverage",
  moduleDirectories: ["node_modules"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^test-utils$": "<rootDir>/src/testUtils/test-utils.tsx",
  },
  setupFiles: ["./jest.setup.tsx"],
  setupFilesAfterEnv: ["./jest.setupAfterEnv.ts"],
  testEnvironment: "jest-environment-jsdom",
  verbose: true,
  roots: ["./src"],
}

[Deeksha123]

Thanks @michalstrzelecki.