将 cypress-angular-unit-test 集成到 Cypress 插件中的问题答案

【问题标题】：Issue integrating cypress-angular-unit-test into Cypress plugins将 cypress-angular-unit-test 集成到 Cypress 插件中的问题
【发布时间】：2021-01-27 18:05:52
【问题描述】：

我正在尝试将 cypress-angular-unit-test 插件添加到 Cypress。

但是，在the instructions provided on the related GitHub page 之后，我收到以下错误：

 The plugins file is missing or invalid.

 /MyProjectName/cypress/plugins/index.js:1
 import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
 ^^^^^^

 SyntaxError: Cannot use import statement outside a module

再次，按照指示，我已将以下内容添加到 support/index.js

 // core-js 3.*
 require('core-js/es/reflect');
 // core-js 2.*
 require('core-js/es7/reflect');
 require('cypress-angular-unit-test/support');

以下是plugins/index.js

 import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';

 module.exports = (on, config) => {
  on('file:preprocessor', cypressTypeScriptPreprocessor);
  require('@cypress/code-coverage/task')(on, config);
  return config;
 };

我还将相关的 helper.js 和 cy-ts-preprocessor.js 文件添加到插件文件夹中。

我还在 cypress.json 中添加了必要的配置

   "experimentalComponentTesting": true,

我什至尝试通过将 tsconfig.json 添加到 cypress 文件夹来添加类型/节点，如下所示：

 {
  "compilerOptions": {
  "target": "es5",
  "lib": ["es5", "dom"],
  "types": ["cypress", "node"],
  "experimentalDecorators": true
},
 "include": [
 "**/*.ts"
 ]
}

将目标和/或 lib 值更改为 es6 无效。

将导入更改为 require 会产生一个不同的错误，即使它确实有效，对于我缺少的某些细节来说，这似乎是一个 hacky 解决方案。

¯\_(ツ)_/¯

【问题讨论】：

^^^^^ 猜猜有人不喜欢我的耸肩表情符号 ;-)

标签： unit-testing cypress

【解决方案1】：

不完全是答案，但至少可以解决。

重新开始或卸载 Cypress 和 cypress-angular-unit-test
关注instructions for Nx Cypress install found on here
Go back to cypress-angular-unit-test instructions 忽略这部分：

  Configure cypress/plugins/index.js to transpile Angular code.

  import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
   module.exports = (on, config) => { 
   on('file:preprocessor', cypressTypeScriptPreprocessor);
   return config;
  };

  The file cy-ts-preprocessor is here

【讨论】：