与Vue，Cypress和Cucumber一起测试时如何使用类？

Question

我正在尝试实现一些简单的方法：我希望通过赛普拉斯和黄瓜进行e2e测试。我有一个使用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（传递案例的分支主控，失败案例的分支pageObject_pattern）。

我假设这与ES6和cypress有关...但是我显然不知道这里发生了什么。此外，我在互联网上找到的所有内容都与柏树黄瓜和Typescript有关，我不使用...

我想念什么？

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

这只是解决方法，不是真正的解决方法。运行柏树时，我们必须禁用babel。

希望会帮助您！