Jest 遇到意外令牌 (TinyMCE)

Question

我正在对我的一个组件使用 Jest 到运行单元测试，但出现了一些错误。

我尝试测试的组件使用 tinymce，因此，我从 tinymce 导入了一些文件。我在 Jest 官方文档中看到我插入了以下内容，我的 setupTests.js 文件中有：

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

然而，我这样做了，但我遇到了另一个问题：

Jest encountered an unexpected token SyntaxError: Unexpected token '.'

import "tinymce/skins/ui/oxide.skin.min.css"

我尝试遵循模拟来自 Tinymce 的所有内容的建议，以及使用“moduleNameMapper”模拟非 JS 模块。例如，我的 _jest.config.js 文件包括：

module.exports = {
  "moduleNameMapper": {
    "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
    "^[./a-zA-Z0-9$_-]+\.png$": "<rootDir>/RelativeImageStub.js",
    "module_name_(.*)": "<rootDir>/substituted_module_.js",
    "assets/(.*)": [
      "<rootDir>/images/",
      "<rootDir>/photos/",
      "<rootDir>/recipes/"
    ]
  }
  "transformIgnorePatterns": [
    "<rootDir>/node_modules/"
  ]
}

上面的方法不起作用，我仍然得到同样的错误。

编辑：

根据其中一项建议，我创建了一个 styleMock.js 文件，其中包含 module.exports = {}; 并包含在我的 src/tests/jest/__mocks__ 路径中。然后我输入了：

"moduleNameMapper": {
  '\.(css|less)$': '<rootDir>/src/tests/jest/__mocks__/styleMock.js'
}

但我仍然遇到与上述相同的错误。

Answer 1

遵循此 documentation 有效。

换句话说，在 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)$": "identity-obj-proxy"
    }
  }
}

以及运行yarn add --dev identity-obj-proxy

Jest 遇到意外令牌 (TinyMCE)

Jest encountered an unexpected token (TinyMCE)

css

unit-testing

reactjs

jestjs