导入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一样解析它们。

“意想不到的标记。”消息可能是因为它阻塞的文件的第一行是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

对于在2020年秋季或以后遇到这个问题的任何人来说，对于像SyntaxError: Invalid or unexpected token 当Jest解析CSS文件：True时出现的错误，错误是由于Jest试图将CSS解析为JavaScript造成的，这是不起作用的。因此，更新后的方法是针对Jest documentation on handling static assets的3个步骤，但您不需要像@chitra建议的那样添加像identity-obj-proxy这样的额外包，除非您正在使用CSS Modules。与@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';

Answer 3

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