Jest-dom TypeError: $toString不是一个函数，Typescript, React, Next.

Question

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

每次我运行测试我遇到这个问题，我不确定到底是什么导致它。我已经用了3天了，不确定是不是配置问题。

1. I've remmade the project

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

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

——比;导入"@testing-library/jest-dom">

babel.config.js

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

Answer 1

对于Next.js, Jest配置看起来像这样:

///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)

,

////支持/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'

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

不需要"babel.config.js"， "jest-setup.ts"， "jest.config.ts"在tsconfig。json在包括。根本不需要巴别塔。jest配置也不需要在这里。

我的错误信息是你的。上面的配置对我来说是有效的。

使用Typescript和Jest来测试基于React的组件。

我去掉了babel，因为它是不需要的。

Answer 2

我有完全相同的问题，但没有使用Next.js

我在jest.config.js中解决了这个问题，通过设置automock: false。