导入 css 时开玩笑意想不到的标记

Question

我得到了 SyntaxError: Unexpected token . 的错误

在我的代码中

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

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

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

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

Answer 1

问题是 Jest 正在访问这些 CSS 导入并试图像解析 JavaScript 一样解析它们。

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

无论如何，正 如此答案 中所指出的，解决此问题的方法是创建一个包含导出空对象的模块的文件。我打电话给我 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 之类的模块，它可以为您做同样的事情。

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

Answer 2

对于在 2020 年秋季或之后遇到此问题的任何人，对于像 SyntaxError: Invalid or unexpected token 这样的错误，当 Jest 解析 CSS 文件时：是的，该错误是由于 Jest 试图将 CSS 解析为 JavaScript，这不会起作用。因此，根据 关于处理静态资产的 Jest 文档， 处理此问题的更新方法是 3 个步骤，但您不需要添加额外的包，如 identity-obj-proxy @chitra 所建议的，除非您使用的是 CSS 模块。对比@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';

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