题 使用Jest和React并导入CSS文件的SyntaxError


我试图让我的第一个Jest测试通过React和Babel。

我收到以下错误:

SyntaxError:/Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less:意外的令牌

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

我的package.json配置为jest看起来像这样:

"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"
    ]
  },

那么我错过了什么?


21
2017-09-09 19:30


起源




答案:


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

在项目中创建这样的文件(如果您愿意,可以使用不同的名称或路径):

config/CSSStub.js

module.exports = {};

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

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

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

阅读本指南中的更多内容: https://facebook.github.io/jest/docs/en/webpack.html


38
2017-09-11 09:15



我正在使用Jest v19 +并且具有以下键值对 moduleNameMappers: "\\.(css|sass)$": "identity-obj-proxy",但是,我有一些 .sass 使用的文件 @import 使transformAndBuildScript函数抛出的关键字。有没有什么办法解决这一问题? - JaKXz
事实上,即使有了 sassMock.js 只为所有人导出空对象的文件 \\.sass$ 文件,我看到同样的错误。 - JaKXz
运用 "\\.(css|less)$": "identity-obj-proxy" 为我工作 - nbkhope
@JaKXz你是怎么解决这个问题的?我遇到了同样的问题,我使用css-modules导入css文件。您可以在以下位置找到有关该问题的更多详情 stackoverflow.com/questions/48286678/... - Bharat Soni
我之前只有* .scss,添加* .css也解决了我的问题。谢谢。 - ATOzTOA


我用这个来解决这个问题 moduleNameMapper 键入package.json文件中的jest配置

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

在此之后,您将需要创建两个文件,如下所述

  • __mocks__/styleMock.js

    module.exports = {};

  • __mocks__/fileMock.js

    module.exports ='test-file-stub';

如果您正在使用CSS模块,那么最好模拟代理以启用className查找。 因此您的配置将更改为:

{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}

但是你需要安装 identity-obj-proxy 包作为开发依赖,即

yarn add identity-obj-proxy -D

了解更多信息。你可以参考 开玩笑


4
2018-04-28 10:51



对于从create-react-app到达这里的人, moduleNameMapper 不是受支持的覆盖。评论时版本为1.1.4。 - Prabu Weerasinghe