Jest-dom TypeError: $toString is not a function , Typescript, React, Next.js

Question

I've been trying to configure jest and @testing-library/jest-dom to work with my typescript/react/next.js website.

Every-time I run the test I run into this issue and Im not sure exactly what is causing it. I've been stuck on it for 3 days now and not sure if it's config issue.

1. I've remade the project

2. I've uninstalled and reinstalled packages

3. Tried various config settings

Still no luck

Error

 FAIL  __tests__/dist/button.test.js
  ● Test suite failed to run

    TypeError: $toString is not a function

    > 1 | import '@testing-library/jest-dom'
        | ^

      at isArguments (node_modules/is-arguments/index.js:12:9)
      at node_modules/is-arguments/index.js:28:9
      at Object.<anonymous> (node_modules/is-arguments/index.js:29:2)
      at Object.<anonymous> (node_modules/deep-equal/index.js:10:19)
      at Object.<anonymous> (node_modules/aria-query/lib/elementRoleMap.js:7:41)
      at Object.<anonymous> (node_modules/aria-query/lib/index.js:10:46)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/to-be-checked.js:8:18)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/matchers.js:203:20)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:3:42)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/index.js:3:1)
      at Object.<anonymous> (jest-setup.ts:1:1)

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "noFallthroughCasesInSwitch": true,
    "outDir": "./dist",
    "paths": {
      "@/*": ["./*"]
    },
  },
   "compileOnSave": true,
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "babel.config.js", "jest-setup.ts", "jest.config.ts"],
  "exclude": ["node_modules"]
}

jest.config.ts

import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
  preset: "ts-jest",
  testEnvironment: "node",
  extensionsToTreatAsEsm: ['.ts'],
  verbose: true,
  automock: true,
  transformIgnorePatterns: ['node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
    
  },
  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
}

export default config;

jest-setup.ts

--> import '@testing-library/jest-dom'

babel.config.js

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

Answer 1

For Next.js the Jest config will look like this:

/// jest.config.ts

import nextJest from 'next/jest'

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['./support/jest.setup.ts'],
  setupFiles: [
    "./support/environment.ts"
  ],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

export default createJestConfig(customJestConfig)

where

/// ./support/jest.setup.ts

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.ts`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

/// ./support/environment.ts

process.env.AUTH0_SECRET = 'session_secret';
process.env.AUTH0_ISSUER_BASE_URL = 'https://acme.auth0.local';
process.env.AUTH0_BASE_URL = 'http://www.allstars.com/';
process.env.AUTH0_CLIENT_ID = 'client_id';
process.env.AUTH0_CLIENT_SECRET = 'client_secret';

export {}

/// tsconfig.json

...
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
...

no need to have "babel.config.js", "jest-setup.ts", "jest.config.ts" in tsconfig.json > include. No need of babel at all. The jest configs are not required to be here as well.

I had the error message as yours. And the config above works for me.

Next.js with Typescript and Jest to test React based components.

I got rid of babel as it is not needed.

Answer 2

I had the exact same issue, but didn't use Next.js

I resolved it in jest.config.js, by setting automock: false.