导入 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: { ... }.

无论如何，正如在这个答案中指出的那样，解决这个问题的方法是创建一个包含导出空对象的模块的文件。我打电话给我的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 年秋季或之后遇到此问题的任何人，对于类似SyntaxError: Invalid or unexpected tokenJest 解析 CSS 文件时的错误：是的，该错误是由于 Jest 尝试将 CSS 解析为 JavaScript，这将不起作用。因此，根据有关处理静态资产的Jest 文档，处理此问题的更新方法是 3 个步骤，但identity-obj-proxy除非您使用CSS Modules，否则您不需要像@chitra 建议的那样添加额外的包。并对比@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 4

模拟

第一种方法
您可以直接在测试文件中模拟导入的CSS。

// Component.test.js

jest.mock('react-dates/lib/css/_datepicker.css', () => '')
describe('', () => {...})

第二种方法
或者mock它全局。在里面[root]/jest-config/mocks创建两个文件：reactDatePicker.js和index.js

// reactDatePicker.js
/* global jest */

export default () => jest.mock('react-dates/lib/css/_datepicker.css', () => '')

// index.js
import reactDatePickerCssMock from './reactDatePicker'

reactDatePickerCssMock()

然后里面package.json

"jest": {
  "setupFilesAfterEnv": ["<rootDir>/jest-config/mocks/index.js"]
}