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

Question

测试组件

我试图用Jest对反应组件进行一些非常简单的测试.由于我的组件文件顶部的这一行,我遇到了问题

import {} from './style.less';

这里的导入不需要进行测试,理想情况下可以从测试中忽略.

[npm测试]的结果

当测试通过npm test我获得响应时

FAIL 测试 /app_test.js●运行时错误语法错误:意外的令牌{在文件'client/components/app/style.less'中.

确保您的预处理器设置正确,并确保您的"preprocessorIgnorePatterns"的配置是正确的: http://facebook.github.io/jest/docs/api.html#preprocessorignorepatterns-array-string 如果您正在建立玩笑或修改你的预处理器,试试吧jest --no-cache.预处理器:node_modules/jest-css-modules.Jest试图执行以下预处理代码://一些无代码

但是,如果我注释掉较少的导入行,我的测试运行正确.

题

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

Answer 1

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

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

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

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

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

Answer 2

如果仍有此问题,请尝试将以下配置添加到您的jest.config.json文件中:

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

在这里,styleMock.js你正在创建一个变换器,它将.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

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