导入css时开玩笑的意外令牌

Question

我收到SyntaxError: Unexpected token . 的错误

在我的代码中

import 'react-dates/lib/css/_datepicker.css'

import 'semantic-ui-css/semantic.min.css'

那些不在我的 spec.js 中，而是在我的实现代码中，有什么线索吗？我运行我的应用程序没有问题，但是当我尝试运行测试时会抛出错误。

Answer 1

问题在于 Jest 正在处理这些 CSS 导入并试图将它们解析为 JavaScript。

“意外令牌”。消息的出现可能是因为它阻塞的文件的第一行是 CSS 类声明，即.datepicker: { ... }。

无论如何，正如this answer 中指出的那样，解决此问题的方法是创建一个包含导出空对象的模块的文件。我打电话给我的styleMock.js。

module.exports = {};

然后，您需要在项目根目录中创建一个jest.config.js 文件并添加：

module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
  }
};

moduleNameMapper 设置告诉 Jest 如何解释具有不同扩展名的文件。在这种情况下，我们只需将其指向我们刚刚创建的空文件。显然相应地调整文件的路径。

请注意，您可以将上面的正则表达式扩展为您需要的任何文件结尾。我的看起来像：

moduleNameMapper: {
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    '<rootDir>/test/jest/__mocks__/fileMock.js',
  '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
},

其中fileMock.js 与styleMock.js 相同

或者，您可以使用 jest-transform-stub 之类的模块，它为您做同样的事情。

Answer 2

Jest 不适用于导入 CSS 的 JSX。

我通过在 package.json 文件的 jest 配置中使用 moduleNameMapper 键解决了这个问题。

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|scss|sass)$": "identity-obj-proxy" 
        }
   }
}

但您需要安装 identity-obj-proxy 包作为开发依赖，即

yarn add identity-obj-proxy -D

Answer 3

对于在 2020 年秋季或之后遇到此问题的任何人，对于 Jest 解析 CSS 文件时出现类似 SyntaxError: Invalid or unexpected token 的错误：确实，该错误是由于 Jest 试图将 CSS 解析为 JavaScript，这是行不通的。因此，根据Jest documentation on handling static assets，处理此问题的更新方法是 3 个步骤，但除非您使用CSS Modules，否则您不需要像@chitra 建议的那样添加额外的包，如identity-obj-proxy。对比@james-hibbard 的建议：fileMock.js 现在看起来略有不同，您不需要创建jest.config.js。

1 在你的package.json 添加这个

{
  "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)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

2 然后创建以下两个文件：

// __mocks__/styleMock.js

module.exports = {};

3

// __mocks__/fileMock.js

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

当 Jest 像这样运行时，这应该可以解决这些特定错误

SyntaxError: Invalid or unexpected token
> 1 | import '../src/css/console.scss';