How to use class when testing with Vue, Cypress and Cucumber?

I am trying to implement something simple: I want my e2e tests run with Cypress and cucumber.
I have an application created with Vue CLI 4.1.1. I added with NPM the package: cypress-cucumber-preprocessor (V1.19.0)

Edit:
After a lot of research and tests, I think I found where the problem comes from, but I don't know how to fix it yet:

The '@vue/cli-plugin-babel/preset' does not seem to be working with .feature file...

My babel.config.js file is:

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

Any idea how I can make cli-plugin-babel working with cucumber cypress?

Original message : I have a Test.feature file, executing steps defined in test.step.js files. Here is the content of my 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)
});

And the content of my PageObject home.page.js:

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

When I run:

npm run test:e2e

I get the following error:

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.

These errors does not occur when I use:

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

You can checkout my project on Github: https://github.com/truar/cloudcmr-v2 (branch master for the passing case, branch pageObject_pattern for the failing case).

I am assuming this is something related to ES6 and cypress... but I clearly don't know what is going on here. Besides, everything I find on the Internet talks about cypress cucumber and Typescript, which I don't use...

What am I missing?

Solution

I found the answer. See this PR for more details : https://github.com/cypress-io/cypress/issues/2945

Basically, there is an incompatibility between Babel 7 and Cypress 3. I had to change the babel.config.js file :

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

It is just a workaround, not a real fix. We have to disable babel when running cypress.

Hope will help you !