Issue encountered: Jest-dom is throwing a TypeError because $toString is not recognized as a function on a project using Typescript, React

Question

Issue encountered: Jest-dom is throwing a TypeError because $toString is not recognized as a function on a project using Typescript, React

I have been facing a challenge while setting up jest and @testing-library/jest-dom for my typescript/react/next.js website.

Each time I try running the tests, an error occurs, and I am struggling to identify the root cause. This issue has been perplexing me for the past 3 days, and I suspect it might be related to a configuration problem.

I have recreated the entire project
I have uninstalled and reinstalled packages
I have experimented with different config settings

No luck so far

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'}}]],
};

typescript next.js ts-jest testing-library jest-dom

Answer 1

Answer №1

If you are using Next.js, the Jest configuration should be set up as follows:

/// 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 include "babel.config.js", "jest-setup.ts", "jest.config.ts" in tsconfig.json. Babel is not required at all. The Jest configs can be excluded as well.

I encountered a similar error message and found that the above configuration worked for me.

This setup uses Next.js with Typescript and Jest to facilitate testing of React components without the need for Babel.

Answer 2

If you are using Next.js, the Jest configuration should be set up as follows:

/// 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 include "babel.config.js", "jest-setup.ts", "jest.config.ts" in tsconfig.json. Babel is not required at all. The Jest configs can be excluded as well.

I encountered a similar error message and found that the above configuration worked for me.

This setup uses Next.js with Typescript and Jest to facilitate testing of React components without the need for Babel.

Answer 3

Answer №2

Dealing with a similar problem, I found a solution without the need for Next.js

In my case, tweaking the jest.config.js file and changing the automock: false setting did the trick.

Answer 4

Dealing with a similar problem, I found a solution without the need for Next.js

In my case, tweaking the jest.config.js file and changing the automock: false setting did the trick.

Issue encountered: Jest-dom is throwing a TypeError because $toString is not recognized as a function on a project using Typescript, React

Answer №1

Answer №2

Similar questions

Guide to turning off the previous button in FullCalendar using Angular 7 and TypeScript

Utilizing Typescript Generics in Arrow Function to Combine Two Arguments

Issues with relocating function during the NgOnInit lifecycle hook in an Angular 2 application

What is the recommended TypeScript type for the NextJS _app.tsx Component and pageProps?

Managing data with Angular 2: Setting and retrieving values

Advancement of server-side actions in NextJs 13 or 14 can now be tracked in

What is causing this error/bug to show up in Angular?

Typescript: The .ts file does not recognize the definition of XMLHttpRequest

Ways to effectively utilize an interface incorporating props.children and other property varieties

What is the best way to merge two approaches for tallying items within each category?

Having trouble testing firebase messaging on my local server

Generating a Dynamic Sitemap for Strapi and Next.js

Angular Http Promise is not returning the expected value

Incorporate Typescript into specific sections of the application

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

Angular 14 Observables are not triggering resize events

The functionality of the System JS map is not functioning properly

Test fails in Jest - component creation test result is undefined

Tips for streamlining responses for the latest create-next-app version

Prisma Date and Time Formatting Challenge