Jest-dom TypeError：$toString 不是 function、Typescript、React、Next.js

Question

我一直在尝试配置 jest 和 @testing-library/jest-dom 以与我的 typescript/react/next.js 网站一起使用。

每次我运行测试时都会遇到这个问题，但我不确定到底是什么原因造成的。 我已经坚持了 3 天了，不确定是不是配置问题。

1. 我重做了项目

2. 我已经卸载并重新安装了软件包

3. 尝试了各种配置设置

仍然没有运气

错误

 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"]
}

开玩笑.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;

开玩笑-setup.ts

--> 导入 '@testing-library/jest-dom'

babel.config.js

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

Answer 1

对于 Next.js，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)

在哪里

///./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"],
...

不需要在 tsconfig.json > 包含中包含“babel.config.js”、“jest-setup.ts”、“jest.config.ts”。 根本不需要巴别塔。 玩笑的配置也不需要在这里。

我有你的错误信息。 上面的配置对我有用。

Next.js 和 Typescript 和 Jest 来测试基于 React 的组件。

我摆脱了 babel，因为它不需要。