Question

我对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 .

Answer 1

最佳解决方案是在您的Jest配置中使用moduleNameMapper行，described in the Jest docs。

最小的＆＃34;忽略css＆＃34; package.json中的jest config可能会喜欢这个

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

然后styleMock.js就是这个

module.exports = {};

Answer 2

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

为了解决这个问题，我必须做两个步骤：

1）@Jonathan Stray解决方案所以添加moduleNameMapper指向js mock（有关更多详细信息，请参阅他的回复）

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”，它运行良好。

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

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

或者用纱线

yarn add -D jest-css-modules-transform

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

module.exports = {
    testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
    setupFilesAfterEnv: ["<rootDir>/setupTests.tsx"],
    transform: {
        "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
        '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform'
    }
};

Answer 4

您是否尝试过babel CLI？

在我的预处理器中，我使用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（babel.transform）的原因？在jest中也看custom preprocessor。

试图解析.css的开玩笑

4 个答案: