Javascript jest正在尝试解析.css

我对jest有一个问题，不管我做什么，它总是试图将css文件解析为javascript

使用webpack正确构建文件

我对jest有以下配置

"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 .

（{“Object.”：函数（模块、导出、require、目录名、文件名、全局、jest）{.button{
^
SyntaxError:意外标记。

你试过了吗

在我的预处理器中，我使用

babel-core

和

canCompile

函数从

babel-core->utils

转换我的代码，并忽略.js、.es、.jsx等文件以外的其他文件

var babel = require('babel-core');
var canCompile = babel.util.canCompile

module.exports = {
    process: function (src, filename) {
    if (!canCompile(filename)) {
        return ''; //ignore this file
    }

---

也许您的代码也没有被转换，这就是为什么您有

SyntaxError

（）？也可以看看in jest。

最好的解决方案是在jest配置中使用

moduleNameMapper

行，如下所示

package.json

中的最小“ignore css”jest配置可能如下

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

---

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

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

1） @Jonathan解决方案添加了一个指向js模拟的

moduleNameMapper

（更多细节请参见他的回复）

2） 然后我必须安装

jest css modules transform

插件，并将其添加到

package.json中的jest配置中，如下所示：

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

“开玩笑”：{
//...
“转变”：{
“+\ \（css | styl | less | sass | scss）$”：“/node_modules/jest css modules transform”，
//...
},
//...
}
我正在使用“jest css模块转换”，它工作得很好

我必须安装jest css模块转换插件：
还是用纱线

yarn add -D jest-css-modules-transform

然后将其添加到jest.config.s中的jest配置中，如下所示：
module.exports={
testPathIgnorePatterns:[“/.next/”，“/node_modules/”，
setupFilesAfterEnv:[“/setupTests.tsx”]，
转换：{
“^.+\.（js | jsx | ts | tsx）$”：“/node_modules/babel jest”，
“.+\（css | styl | less | sass | scss）$”：“jest css模块转换”
}
};
我实际上找到了解决方案，它必须使用styleMock和fileMock jest文件，我稍后会发布这样的答案，因为我设法再次访问了存储库。我失去了对存储库的访问权：c但据我所知，styleMock和fileMock jest文件中必须有某种东西告诉它不要解析任何东西。似乎这将l仅适用于在jest测试文件中直接导入的文件。如果您导入一个导入css文件的模块，那么它仍然会中断。@Edward不是这样，它适用于我测试的模块导入的css文件imports@gaurav5430您正在使用哪个版本的node/jest？jest^24和node 8 jest文档现在建议使用“identity obj proxy”包与moduleNameMapper结合使用，这对快照测试有一些好处：通过使用jest css modules transform，您正在转换css文件以返回其他内容。您仅仅“忽略”还不够吗使用moduleNameMapper创建css文件？如果使用transform，是否需要moduleNameMapper？
npm i --save-dev jest-css-modules-transform

yarn add -D jest-css-modules-transform