如何在 cypress typescript 项目中正确导入自定义命令?

How to properly import custom commands within cypress typescript project?

更新我的核心依赖项@nrwl/、@angular/ 和 cypress 后,我的 e2e 测试有些损坏。我收到以下错误:

import './command'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'.

Cypress 还显示此错误:

这些是更新的依赖项:

在更新之前,我们只是直接从 spec-files 中的 command.ts 文件导入自定义命令。但也通过使用 support/index.ts 出现相同的错误,但随后在 index-file 中。

唯一可行的方法(但实际上不能成为解决方案)是将自定义命令移动到 index-file 本身并删除导入语句。

并且由于我在 NX-Workspace 中运行这些测试,所以我无法直接访问任何 webpack 或 babel 配置或类似的东西。

任何提示或想法,我可以尝试什么?

错误 ParseError: 'import' and 'export' may appear only with 'sourceType: module'. 来自 eslint

要修复它,请在 cypress/ 目录中添加一个 .eslintrc.json 文件,内容为:

{
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  }
}

我自己找到了解决方案。问题是,我错过了 typescript preprocessor

我不知道为什么,但直到 NX 7.4 版(或更高版本),才没有必要定义插件文件。 NX 以某种方式掩盖了这一点。

这是我必须更改的内容:

// plugins/index.js
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Preprocess Typescript
  on('file:preprocessor', preprocessTypescript(config));
};

并引用 cypress.json 中的文件:

{
    "fileServerFolder": "./",
    "fixturesFolder": "./src/fixtures",
    "integrationFolder": "./src/integration",
    "pluginsFile": "./src/plugins/index",
    "supportFile": "./src/support/index.ts"
  }