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

Question

我正在构建一个可重用的 React 组件，而不使用 React-App，而且我对 Jest 很陌生。我不断收到这个消息。我在 Stackoverflow 上尝试了几种帖子解决方案，但目前陷入困境：

\n

\xe2\x97\x8f 测试套件运行失败

\n

Jest encountered an unexpected token\n\nThis usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.\n\nBy default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n\nHere's what you can do:\n \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.\n \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\nYou'll find more details and examples of these config options in the docs:\nhttps://jestjs.io/docs/en/configuration.html\n\nDetails:\n\nC:\\Users\\User\\Documents\\accessible-date-picker\\src\\__tests__\\DatePicker.spec.js:1\n({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { DatePicker } from '../containers/DatePicker';\n                                                                                         ^^^^^^\n\nSyntaxError: Cannot use import statement outside a module\n\n  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)\n

\n

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

\n

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

\n

这是我的 tsconfigurations：

\n

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

\n

这是我的开发依赖项：

\n

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

\n

任何帮助将不胜感激！

\n

Answer 1

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

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

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