试图解析 .css 的笑话

Posted 2023-02-22

【中文标题】试图解析 .css 的笑话

【英文标题】：jest trying to parse .css

【发布时间】：2017-01-31 03:37:35

【问题描述】：

我有一个玩笑的问题，不管我做什么，它一直试图将 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 .

【参考方案1】：

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

package.json 中的最小“忽略 css”笑话配置可能像这样

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

那么 styleMock.js 就是这个

module.exports = ;

【讨论】：

似乎这仅适用于在 jest 测试文件中直接导入的文件。如果你导入一个导入 css 文件的模块，那么它仍然会中断。

@Edward 这不是真的，它适用于我的测试导入的模块导入的 css 文件

@gaurav5430 你使用的是哪个版本的node/jest？

开玩笑^24和节点8

Jest 文档现在建议将“identity-obj-proxy”包与 moduleNameMapper 结合使用，这对快照测试有一些好处：jestjs.io/docs/en/webpack#mocking-css-modules

【参考方案2】：

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

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

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

【讨论】：

通过使用 jest-css-modules-transform 您正在转换 css 文件以返回其他内容。仅使用 moduleNameMapper “忽略” css 文件对您来说还不够吗？如果您使用的是转换，甚至需要 moduleNameMapper 吗？

【参考方案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'
    
;

【参考方案4】：

你试过babel CLI吗？

在我的预处理器中，我使用 babel-core->utils 中的 babel-core 和 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
    

也许您的代码也没有被转换，这就是您拥有SyntaxError (babel.transform) 的原因？还请看custom preprocessor 开玩笑。

【讨论】：

我实际上找到了必须使用 styleMock 和 fileMock 笑话文件的解决方案，稍后我会发布这样的答案，因为我设法再次访问存储库。

我失去了对存储库的访问权限 :c 但据我所知，styleMock 和 fileMock 笑话文件中必须有一些东西告诉它不要解析任何东西。