Jest 解析css文件异常

异常内容

 FAIL  src/MultiCheck/MultiCheck.test.tsx
  ● Test suite failed to run

    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:
     /path/src/checkbox/Checkbox.css:2
    .check {
    ^

    SyntaxError: Unexpected token '.'

    > 1 | import './Checkbox.css';
        | ^
      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1258:14)
      at Object.<anonymous> (src/MultiCheck/MultiCheck.tsx:1:1)

分析

Jest 对样式文件解析失败

解决方法

1. 在Jest 配置文件中增加如下配置, 下边代码配置其实是不止css、less， 还包括了图片、音频，用不上的可以去掉

"moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "identity-obj-proxy"
  }

2. 安装 identity-obj-proxy

npm install --save-dev identity-obj-proxy

装好后再执行 npm run test 就可以正常执行了