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

Posted 2023-03-23

【中文标题】如何在 cypress typescript 项目中正确导入自定义命令？

【英文标题】：How to properly import custom commands within cypress typescript project?

【发布时间】：2019-11-11 21:38:11

【问题描述】：

在更新了我的核心依赖项@nrwl/、@angular/ 和 cypress 之后，我的 e2e 测试有点坏了。我收到以下错误：

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

赛普拉斯还显示此错误：

这些是更新的依赖项：

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

唯一有效（但实际上不能成为解决方案）的方法是将自定义命令移动到索引文件本身并删除导入语句。

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

任何提示或想法，我可以尝试什么？

【参考方案1】：

我自己找到了解决方案。问题是，我错过了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"
  

【参考方案2】：

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

要修复它，请在 cypress/ 目录中添加一个 .eslintrc.json 文件，其中包含以下内容：

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

【讨论】：

虽然我只使用了typescript和tslint，但我还是安装了eslint并将.eslintrc.json放在e2e-app-folder的src文件夹中（在NX-workspace中，没有cypress-folder ）。但不幸的是，它并没有改变任何东西。

我昨天开始了一个单独的简化项目。在其中，我重写了登录的自定义命令并且它起作用了，至少在那个非常基本的例子中是这样。所以我想，我在实现中犯了一些错误，我必须重构它。如果我找到答案，我会及时通知您。