Jestjs 使用带有角度和笑话的CKEditor

我正在Angular 10应用程序中使用CKEditor5。经过漫长而痛苦的集成过程后，CKEditor在应用程序中工作得非常完美。应用程序的结构是nx monorepo，如果这有区别的话

但是，我现在无法为我的应用程序运行一些单元测试。使用CKeditor的组件的任何单元测试（目前大约有5个组件）现在都会失败，并出现以下错误：

C:\path\to\my\repo\node_modules@ckeditor\ckeditor5 watchdog\src\editorwatchdog.js:12

从“lodash es”导入{throttle，cloneDeepWith，isElement}

^^^^^^

SyntaxError:无法在模块外部使用导入语句

似乎我需要使用Babel来转换editorwatchdog.js中的导入，以便Jest能够理解它们。为了解决这个问题，我安装了@babel/core 7.13.8、@babel/preset env 7.13.9和babel jest 26.6.3（注意，我已经安装了jest 26.2.2）

我已将babel.config.js文件添加到我的项目根目录中，其中仅包含以下内容：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
  ],
};

最后，我更新了根jest.config.js文件，以包含transform和transformIgnorePatterns键：

module.exports = {
  transform: {},
  transformIgnorePatterns: "\\\\/node_modules\\\\/(?!@ckeditor).+\\.(js|jsx|ts|tsx)$",
  projects: [
    ... // all my libs and apps
  ]
}

（注意：我还尝试将transform和transformIgnorePatterns添加到package.json中）

但是，当我在执行上述更改的情况下运行测试时，仍然会看到与以前相同的错误消息。很明显我错过了什么，但是什么

---

最终的结果是，我需要Babel只转换@ckeditor文件，并且只在运行单元测试时进行转换。

我使用Jest测试带有ckeditor 5组件的React应用程序

您得到这个错误是因为

首先，您需要告诉Jest转换CKEditor 5代码：

// jest.config.ts
export default {
  // ...
  transformIgnorePatterns: [
    '\\\\/node_modules\\\\/(?!@ckeditor).+\\.(js|jsx|ts|tsx)$',
    '\\.pnp\\.[^\\/]+$'
  ],
}

这将传输CKEditor5模块，但SVG也会遇到类似的错误：

SyntaxError:意外标记'

// jest.config.ts
export default {
  // ...
  moduleNameMapper: {
    '\\.(svg|css)$': '<rootDir>/test/__mocks__/fileMock.js',
  },
}