Jest 在 typescript 中遇到了一个意外的标记答案

【问题标题】：Jest encountered an unexpected token in typescriptJest 在 typescript 中遇到了一个意外的标记
【发布时间】：2020-11-04 19:48:25
【问题描述】：

我正在测试我的 React+TypeScript 组件，但我收到了这条奇怪的消息，我尝试了所有方法但没有找到任何有用的资源，这是 TypeScript 错误还是其他什么，说实话，我在这里头晕，所以我遇到了一个问题：

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:
     • 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:

    /home/dr/code/npmpackage/darkmode/src/style.module.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.switch {
                                                                                             ^

    SyntaxError: Unexpected token '.'

      1 | import * as React from 'react'
      2 | // import 'learning-npm-package/dist/index.css'
    > 3 | import classes from './style.module.css'

我目前在 React Project 中使用的包如下：

"peerDependencies": {
    "react": "^16.0.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.38",
    "@types/react": "^16.9.27",
    "@types/react-dom": "^16.9.7",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "enzyme-to-json": "^3.5.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.10",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "ts-jest": "^26.1.2",
    "typescript": "^3.7.5"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "react-test-renderer": "^16.13.1"
  }

./style.module.css:

.switch {
  display: flex;
  height: 36px;
  position: relative;
  width: 70px;
}

/** small */
.container {
  height: 26px;
  width: 50px;
}

我们将不胜感激，谢谢！

【问题讨论】：

如果您还需要什么，请告诉我！
这个./style.module.css 也是需要的。否则，可能很难确定这是错误的。
@ikos23 感谢您告诉我，style.module.css 包含很多样式我在这里无法全部上传，我更新了任务！
检查这是否有帮助 - stackoverflow.com/questions/54627028/…
另外，考虑用jest-transform-cssas mentioned here调查transform。

标签： css reactjs typescript jestjs enzyme

【解决方案1】：

所以，我会在研究找到解决方案后自己回答。默认情况下 jest 不知道如何处理 CSS 文件，我们需要 CSS module mock for jest，为此，我们需要在 Webpack 和 Jest 之间建立一个桥梁，这就是 moduleNameMapper 发挥桥梁作用的方式，我们只需安装 identity-obj-proxy 即可创建一个模拟 CSS 模块，该模块返回预期的 CSS 类名，如 <div className={classes.div}>。

让我们安装代理：

yarn add identity-obj-proxy

// NPM
npm install identity-obj-proxy

在根/ 目录而不是src 上创建一个文件，命名为jest.config.js 并放入下面的代码：

module.exports ={
  moduleNameMapper: {
    "\\.css$": "identity-obj-proxy",
  },
};

Resource

【讨论】：