Jest 和 React 的 SyntaxError 以及导入 CSS 文件

Question

我正在尝试通过 React 和 Babel 让我的第一个 Jest 测试通过。

我收到以下错误：

语法错误：/Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less：意外令牌

    >  7 | @import '../variables.css';
          | ^

我开玩笑的 package.json 配置如下所示：

 "babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "syntax-class-properties",
      "transform-class-properties"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "verbose": true,
    "modulePathIgnorePatterns": [
      "rpmbuild"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/core-js"
    ]
  },

那么我错过了什么？

原文由 Mano Dupont 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

moduleNameMapper 是告诉 Jest 如何解释具有不同扩展名的文件的设置。您需要告诉它如何处理 Less 文件。

在您的项目中创建一个这样的文件（如果您愿意，可以使用不同的名称或路径）：

config/CSSStub.js

 module.exports = {};

这个存根是我们将告诉 Jest 使用而不是 CSS 或 Less 文件的模块。然后更改 moduleNameMapper 设置并将此行添加到其对象以使用它：

 '^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

现在 Jest 会将任何 CSS 或 Less 文件视为导出空对象的模块。您也可以做其他事情——例如，如果您使用 CSS 模块，则可以使用代理，以便每次导入都返回导入的属性名称。

在本 指南 中阅读更多内容。

原文由 Dan Abramov 发布，翻译遵循 CC BY-SA 4.0 许可协议