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

您可以在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 了解更多信息。

Answer 2

或者更好的是，添加

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

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

2 个答案: