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

Question

测试组件

我正在尝试使用 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

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

问题

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

module.exports = {
  process() {
    return ''
  }
}

Answer 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"
    }
  }
}

Answer 4

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