如何在赛普拉斯打字稿项目中正确导入自定义命令？

Question

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

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

Cypress还会显示此错误：

这些是更新的依赖项：

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

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

由于我是在NX-Workspace中进行这些测试的，因此我无法直接访问任何webpack或babel配置或类似内容。

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

Answer 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"
  }

Answer 2

错误mode.classList.add("lightmode").remove("darkmode"); 来自ParseError: 'import' and 'export' may appear only with 'sourceType: module'.

要解决此问题，请在eslint目录中添加一个.eslintrc.json文件，内容如下：

cypress/