Jest 在使用 React TypeScript 时遇到了意外的令牌

Question

我正在构建一个可重用的 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",
  }
};

这是我的 ts 配置：

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

任何帮助将不胜感激！

Answer 1

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

但是，您可能知道 tsc 也可以转换您的 js 代码，只要您像以前那样设置 allowJs: true。因此，我认为您的问题将得到解决，因为您可以改进模式以进行上述转换，包括 jsx 文件：

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