reactjs jest尝试解析.css

jexiocij  于 2023-01-04  发布在  React
关注(0)|答案(5)|浏览(126)

我有一个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 .
nc1teljy

nc1teljy1#

最好的解决方案是在Jest配置中使用moduleNameMapper行,如described in the Jest docs
package.json中的最小“ignore css”jest配置可能如下所示

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

那么styleMock.js就是这样

module.exports = {};
xsuvu9jc

xsuvu9jc2#

我不知道这是否是最好的方法,但考虑到我已经被困在这里一段时间,我张贴的解决方案。
为了修复它,我必须做两个步骤:
1)@Jonathan Stray解决方案,因此添加一个指向js模拟的moduleNameMapper(更多细节请参见他的回复)
2)然后我必须安装jest-css-modules-transform插件,并将其添加到package.json内部的jest配置中,如下所示:

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

70gysomp3#

我使用的是“jest-css-modules-transform”,效果很好。
1.我必须安装jest-css-modules-transform插件:

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

或者用Yarn

yarn add -D jest-css-modules-transform

1.然后将其添加到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'
    }
};
eyh26e7m

eyh26e7m4#

你试过babel CLI吗?
在我的预处理器中,我使用babel-corebabel-core->utils中的canCompile函数来转换我的代码,并且忽略除了.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
    }

也许你的代码也没有被转换,这就是为什么你有SyntaxErrorbabel.transform)?

axzmvihb

axzmvihb5#

通过遵循官方文档,我能够更新我的styleMock以使用代码语法。
第一个月

transform: {
    '.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
  },

__mocks__/styleMock.js

module.exports = {
  process() {
    return {
      code: `module.exports = {};`,
    };
  },
};

相关问题