Question

我遇到了SyntaxError: Unexpected token .

错误

在我的代码中

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

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

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

Answer 1

对于在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';

Answer 2

问题在于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 3

Jest与导入CSS的JSX不兼容。

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

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

但是您将需要安装identity-obj-proxy软件包作为开发人员的依赖项，即

yarn add identity-obj-proxy -D

导入CSS时开玩笑

3 个答案: