javascript - 导入 css 时开 Jest 意想不到的标记

Question

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

在我的代码中

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

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

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

Answer 1

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

“意外的 token ”。消息可能会出现，因为它阻塞的文件的第一行是 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 的模块，它为您做同样的事情。