Jest 在使用 React TypeScript 时遇到意外标记

问题描述

我正在构建一个可重用的 React 组件而不使用 react-app，而且我对 Jest 非常陌生。我不断收到这条消息。我已经在 Stackoverflow 上尝试了几个后期解决方案，但我现在卡住了：

● 测试套件运行失败

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse,e.g. it's not plain JavaScript.

By default,if Jest sees a Babel config,it will use that to transform your files,ignoring "node_modules".

Here's what you can do:
 • If you are trying to use ECMAScript Modules,see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed,you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

C:\Users\User\Documents\accessible-date-picker\src\__tests__\DatePicker.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { DatePicker } from '../containers/DatePicker';
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

我有以下配置，但我不知道为什么我无法解决问题：

//jest.config.js
module.exports = {
  roots: ["<rootDir>/src"],testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)","**/?(*.)+(spec|test).+(ts|tsx|js)",],transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",},coveragePathIgnorePatterns: [
    "/node_modules/"
  ],moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy",}
};

这是我的 tsconfigurations：

{
    "compilerOptions": {
        "lib": [
            "dom","dom.iterable","esnext"
        ],"allowJs": true,"allowSyntheticDefaultImports": true,"skipLibCheck": true,"esModuleInterop": true,"strict": true,"forceConsistentCasingInFileNames": true,"moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react"
    },"include": [
        "src"
    ]
}

这是我的开发依赖项：

 "devDependencies": {
    "@babel/core": "^7.12.7","@babel/plugin-transform-runtime": "^7.12.1","@babel/preset-env": "^7.12.7","@babel/preset-react": "^7.12.7","@babel/preset-typescript": "^7.12.7","@babel/runtime": "^7.12.5","@teamsupercell/typings-for-css-modules-loader": "^2.4.0","@types/fork-ts-checker-webpack-plugin": "^0.4.5","@types/jest": "^26.0.15","@types/react": "^17.0.0","@types/react-dom": "^17.0.0","@types/webpack": "^4.41.25","@types/webpack-dev-server": "^3.11.1","@typescript-eslint/eslint-plugin": "^4.8.1","@typescript-eslint/parser": "^4.8.1","babel-loader": "^8.2.1","css-loader": "^5.0.1","eslint": "^7.14.0","eslint-plugin-react": "^7.21.5","eslint-plugin-react-hooks": "^4.2.0","fork-ts-checker-webpack-plugin": "^6.0.3","jest": "^26.6.3","style-loader": "^2.0.0","ts-jest": "^26.4.4","ts-node": "^9.0.0","typescript": "^4.1.2","webpack": "^5.6.0","webpack-cli": "^4.2.0","webpack-dev-server": "^3.11.0"
  }
}

任何帮助都会非常感谢！

解决方法

看起来您的测试文件是一个 js 文件 (src\__tests__\DatePicker.spec.js) 而不是 ts?x 文件，这意味着此模式永远不会满足 "^.+\\.(ts|tsx)$": "ts-jest"。

但是，您可能知道 tsc 也可以转译您的 js 代码，只要您像之前一样设置 allowJs: true。所以我认为你的问题会在你改进你的模式以在上面转换时得到解决，包括 jsx 文件：

{
  transform: {
    "^.+\\.(t|j)sx?$": "ts-jest",}
}