使用 Vue、Cypress 和 Cucumber 进行测试时如何使用类？答案

【问题标题】：How to use class when testing with Vue, Cypress and Cucumber?使用 Vue、Cypress 和 Cucumber 进行测试时如何使用类？
【发布时间】：2020-04-13 17:26:55
【问题描述】：

我正在尝试实现一些简单的事情：我希望我的 e2e 测试使用 Cypress 和 cucumber 运行。
我有一个使用 Vue CLI 4.1.1 创建的应用程序。我用 NPM 添加了包：cypress-cucumber-preprocessor (V1.19.0)

编辑：
经过大量的研究和测试，我想我找到了问题的根源，但我还不知道如何解决它：

“@vue/cli-plugin-babel/preset”似乎无法使用 .feature 文件...

我的 babel.config.js 文件是：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

知道如何让cli-plugin-babel 使用黄瓜柏树吗？

原始消息：我有一个 Test.feature 文件，执行 test.step.js 文件中定义的步骤。这是我的 test.spec.js 的内容

import { When, Then } from 'cypress-cucumber-preprocessor/steps';
import { HomePage } from './pages/home.page';

When(/^I open the Home page$/, () => {
    let homePage = new HomePage();
    homePage.goTo();
});

Then(/^I see "([^"]*)" in the main heading$/, msg => {
    cy.contains('h1', msg)
});

还有我的PageObject home.page.js 的内容：

export class HomePage {
    goTo() {
        cy.visit("/");
    }
}

当我跑步时：

npm run test:e2e

我收到以下错误：

Oops...we found an error preparing this test file:

  tests/e2e/features/Test.feature

The error was:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'


This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

我使用时不会出现这些错误：

export function goToHomePage() {
    cy.visit("/");
}

您可以在 Github 上查看我的项目：https://github.com/truar/cloudcmr-v2（通过案例的分支 master，失败案例的分支 pageObject_pattern）。

我假设这与 ES6 和柏树有关……但我显然不知道这里发生了什么。另外我在网上找的都是cypress cucumber和Typescript，我没用过……

我错过了什么？

【问题讨论】：

标签： javascript vue.js cucumber tdd cypress

【解决方案1】：

我找到了答案。有关详细信息，请参阅此 PR：https://github.com/cypress-io/cypress/issues/2945

基本上，Babel 7 和 Cypress 3 之间存在不兼容。我不得不更改 babel.config.js 文件：

module.exports = process.env.CYPRESS_ENV
    ? {}
    : {
          presets: ["@vue/cli-plugin-babel/preset"]
      };

这只是一种解决方法，而不是真正的修复。我们必须在运行 cypress 时禁用 babel。

希望能帮到你！

【讨论】：