使用 Vue、Cypress 和 Cucumber 進行測試時如何使用類？

Question

我正在嘗試實現一些簡單的東西：我希望我的 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 （通過案例的分支主，失敗案例的分支 pageObject_pattern）。

我假設這與 ES6 和 cypress 相關……但我顯然不知道這里發生了什么。 此外，我在互聯網上找到的所有內容都在談論我不使用的柏樹黃瓜和打字稿......

我錯過了什么？

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

這只是一種解決方法，而不是真正的解決方法。 我們在運行 cypress 時必須禁用 babel。

希望能幫到你！