让 Jest 在测试时忽略 .less 导入

Posted 2023-02-22

【中文标题】让 Jest 在测试时忽略 .less 导入

【英文标题】：Make Jest ignore the .less import when testing

【发布时间】：2016-09-01 13:01:17

【问题描述】：

测试组件

我正在尝试使用 Jest 对反应组件运行一些非常简单的测试。由于组件文件顶部的这一行，我遇到了问题

import  from './style.less';

这里的导入不需要测试，最好从测试中忽略。

[npm 测试]的结果

当通过npm test 运行测试时，我得到了响应

FAIL tests/app_test.js ● 运行时错误 SyntaxError: Unexpected 令牌在文件'client/components/app/style.less'中。

确保您的预处理器设置正确，并确保您的 'preprocessorIgnorePatterns' 配置正确： http://facebook.github.io/jest/docs/api.html#preprocessorignorepatterns-array-string 如果您当前正在设置 Jest 或修改您的预处理器， 试试jest --no-cache。预处理器：node_modules/jest-css-modules。 Jest 尝试执行以下预处理代码：//some .less code

但是，如果我注释掉较少的导入行，我的测试就会正确运行。

问题

我怎样才能开玩笑地跳过这行代码或忽略这个导入？

【问题讨论】：

检查这个解决方案***.com/a/36137733/2765745为我工作。

【参考方案1】：

除了手动模拟测试顶部的 .less 文件之外，我可以开玩笑地忽略更少文件的唯一方法，例如

jest.mock("../../src/styles.less", () => jest.fn());

是在 package.json 中添加以下内容：

"jest": 
 "moduleNameMapper": 
  ".*\\.less$": "<rootDir>/pathToDummyFile/dummy.js"
  
 ,

每当您的代码尝试导入 less 文件时，它都会重定向导入以获取空的虚拟文件，这将避免您遇到的意外令牌错误。

【讨论】：

这行得通。特别提到<rootDir> react 文档指出，如果我们指向一个文件，那么应该使用<rootDir>，它解析为dummy.js 文件的绝对路径。我将此配置放入我的jest.config.js 文件中。

我认为这是一个正确的答案，@joe-lloyd 如果您满意，请考虑适当地标记它。

【参考方案2】：

如果您仍然遇到此问题，请尝试将以下配置添加到您的 jest.config.json 文件中：

"transform": 
  "^.+\\.(css|less)$": "./styleMock.js"

在这里，在您的 styleMock.js 中，您正在创建一个 transformer，它将像这样转换您的 .less 文件：

module.exports = 
  process() 
    return ''
  

【讨论】：

这不起作用。通过这样做，Jest 抱怨 React 组件中的 import 语句。 import App from '../App' ^^^^^^ SyntaxError: Unexpected token import

【参考方案3】：

聚会有点晚了，但也许今天这会对某人有所帮助。使用jest-transform-stub。

在您的 Jest 配置中，添加 jest-transform-stub 以转换您想要存根的非 javascript 资产：

  "jest": 
    // ..
    "transform": 
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    
  

常见问题

我的模块没有被转换

默认情况下，Jest 不会对 node_modules 应用转换。你可以使用moduleNameMapper来解决这个问题：

  "jest": 
    // ..
    "moduleNameMapper": 
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    
  

【讨论】：

帮我解决了！

【参考方案4】：

我用忽略样式（https://github.com/bkonkle/ignore-styles）解决了同样的问题。我已经将这个库与 mocha 一起使用，但我认为开玩笑应该没问题。

【讨论】：

对我不起作用。按照自述文件中的说明进行了尝试，但没有成功。