测试组件

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

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

这里的导入不需要测试，理想情况下可以从测试中忽略。

[npm 测试] 的结果

当测试通过npm test我得到响应

失败测试/app_test.js ● 运行时错误语法错误：文件“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

但是，如果我注释掉 less import 行，我的测试将正确运行。

问题

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

4个回答

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

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

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

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

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

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

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

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

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

聚会有点晚了，但也许今天这会对某人有所帮助。使用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"
    }
  }
}
常问问题

我的module没有被转换

默认情况下，Jest 不会对 node_modules 应用转换。您可以使用moduleNameMapper以下方法解决此问题：
{
  "jest": {
    // ..
    "moduleNameMapper": {
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }
}

我已经用 ignore-styles( https://github.com/bkonkle/ignore-styles )解决了同样的问题。我已经在 mocha 中使用了这个库，但我认为开玩笑应该没问题。

其它你可能感兴趣的问题

上一篇PET/PETE和PETG有什么区别？下一篇马林鱼固件问题