如何从jest测试套件中排除CSS模块文件？

Question

我有反应组件进行测试,我使用webpack导入其CSS如下.

 import styles from '../../node_modules/openlayers/css/ol.css' // eslint-disable-line no-unused-vars

运行jest后我得到错误:

C:\Users\...\node_modules\openlayers\css\ol.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.ol-box {
                                                                                             ^
    SyntaxError: Unexpected token .

如何从jest测试套件中排除css文件？

Answer 1

还是更好，添加

yarn add --dev identity-obj-proxy

并将以下内容添加到jest.config.json

{
  "jest":{
     "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|scss|sass)$": "identity-obj-proxy"
    },
  }
}

Answer 2

您可以创建自己的模拟jest以防止处理css文件.

// __mocks__/styleMock.js

module.exports = {};

然后在您package.json可以将任何css文件映射到选项styleMock.js下的文件moduleNameMapper:

"jest": {
  ...
  "moduleNameMapper": {
    ...
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
  },
  ..
},

有关 详细信息,请参阅https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets.