试图解析.css的开玩笑

Question

我有一个问题,在其中无论我做什么,它不断尝试解析CSS文件作为JavaScript.

使用webpack正确构建文件.

我有以下配置的开玩笑

"jest": {
    "rootDir": "./src",
    "moduleNameMapper": {
      "^.*[.](css|CSS)$": "../jest/styleMock.js"
    }
  },

我还尝试了一个脚本预处理器来从导入中剥离css:

 "jest": {
    "rootDir": "./src",
    "scriptPreprocessor": "../node_modules/jest-css-modules"
  },

它不断抛出错误.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button {
                                                                                             ^
    SyntaxError: Unexpected token .

Answer 1

最好的解决方案是moduleNameMapper在Jest配置中使用一行,如Jest文档中所述.

最小的"忽略css"jest配置package.json,可能是这样的

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

那么styleMock.js就是这个

module.exports = {};

Answer 2

我不知道这是否是最好的方法，但是考虑到我已经在这里停留了一段时间，我正在发布解决方案。

为了修复它，我必须执行两个步骤：

1）@Jonathan Stray解决方案，因此添加一个moduleNameMapper指向js模拟的指针（有关更多详细信息，请参见他的响应）

2）然后，我必须安装jest-css-modules-transform插件，并将其添加到package.json如下所示的jest配置中：

"jest": {
    //...
    "transform": {
        ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform",
        //...
    },
    //...
}

Answer 3

我正在使用“jest-css-modules-transform”，它运行良好。

1. 我必须安装 jest-css-modules-transform 插件：

npm i --save-dev jest-css-modules-transform

或用纱线

yarn add -D jest-css-modules-transform

2. 然后将其添加到 jest.config.s 内的 jest 配置中，如下所示：

npm i --save-dev jest-css-modules-transform