Exploring the possibilities of utilizing classes in testing scenarios with Vue, Cypress, and Cucumber

I am currently working on setting up e2e tests using Cypress and Cucumber for my project. The application is built with Vue CLI 4.1.1, and I have added the package cypress-cucumber-preprocessor (V1.19.0) via NPM.

Update:
After extensive research and testing, I believe I have identified the source of the issue but am struggling to find a solution:

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

Here is my babel.config.js file:

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

Any suggestions on how I can integrate cli-plugin-babel with Cypress-Cucumber?

In my Test.feature file, I execute steps defined in test.step.js files. Below 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 here is the content of my PageObject home.page.js:

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

When running:

npm run test:e2e

I encounter 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 do not occur when using:

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

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

I suspect this issue is related to ES6 and Cypress, but I am unsure of the exact cause. Additionally, most resources online discuss Cypress-Cucumber integration with Typescript, which I am not utilizing.

Any insights on what could be causing this?

Answer №1

I have discovered the solution. Check out this PR for a more detailed explanation: https://github.com/cypress-io/cypress/issues/2945

Essentially, there is a compatibility issue between Babel 7 and Cypress 3. I needed to adjust the babel.config.js file:

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

This is only a temporary workaround, not a permanent solution. Babel should be disabled when running Cypress.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

You are unable to assign a string value instead of an object when making multiple selections

Utilizing react-select for autocomplete and option-related field has been quite helpful. However, I have noticed that in a single selection scenario, the code provided below only works when sending the value as a string. Unfortunately, it does not function ...

Executing javascript code within the success function of the $ajax method in jQuery: A step-by-step guide

The code snippet below includes a comment before the actual code that is not running as expected. $(document).on('click', '#disable_url', function (e) { e.preventDefault(); var items = new Array(); $("input:checked:no ...

Angular loop is unable to detect changes in the updated list

My Angular application is facing a peculiar issue that I can't seem to figure out. // Here are the class attributes causing trouble tenants: any[] = []; @Input() onTenantListChange: EventEmitter<Tenant[]>; ngOnInit(): void { this. ...

What is causing the issue with the code `exports = { z: function() {} };` not functioning as intended?

Script A exports = { z: function() { console.log('aZ'); } }; Script Main require('./a').z(); // error Have you ever wondered why require('./a') ends up returning an empty object? ...

How come the error message in AngularJS is appearing as blank during error handling?

When utilizing AngularJS code to send a request to the server, everything works smoothly on success. However, deliberately redirecting the request to a different domain causes the CORS problem where the error handling function is triggered but errorData ...

What is the best way to transmit two distinct sets of data from a child component to the v-model of a parent component?

Currently, I am working on a project using vuejs 2 and typescript. In this project, I need to pass two different sets of data - data and attachments - within the parent component. I am utilizing vue-property-decorator for this purpose. However, I am facing ...

Disabling a button after clicking using jQuery

There are occasions when I can inadvertently trigger the submit button twice, resulting in the ajax being triggered twice as well. Below is my HTML code: <div class="buttons-area"> <input id="step-two" class="btn btn-primary" type="submit" v ...

What is the proper way to display the initial content of the menu?

I am currently working on a website design for an upcoming festival. The festival spans over three days, so I have created buttons to navigate and load the content for each day separately. Is there a way for me to make the content for the first day di ...

Is there a way to retrieve the parent window's domain in a child window (opened with window.open) when both windows are located on different

Can anyone offer assistance with cross-domain communication between windows? Looking to use window.open(); function. ...

Is there a way for me to discover the identity of the victor?

There are 4 divs that move at different, random speeds each time. I am trying to determine which one is the fastest or reaches the goal first. Additionally, there is a betting box where you can choose a horse to bet on. I need to compare the winner with my ...

Create a new route on-the-fly within a Nuxt3 middleware

I am working on a Nuxt3 project where I want to dynamically add routes based on an API call to a database. For instance, if a user goes to /my-product-1, the route middleware will check the database and if it finds a matching entry, it will render a produc ...

Unable to initialize the bootstrap datepicker module

I'm having trouble initializing bootstrap-datepicker from this GitHub repository: https://github.com/uxsolutions/bootstrap-datepicker. I can't seem to get it to work properly or call any methods or events on it. My setup includes Laravel 5.4.7, ...

Uploading a screenshot to a server using Ionic 4

I have encountered an issue while trying to take a screenshot and upload it to a server using the spring-boot. I utilized a native library for taking the screenshot and an Angular service to obtain the image URI. I converted the image URI to a blob and sen ...

Exploring the Best Practices for Importing js Files in Vue/Nuxt

Typically, I integrate a JavaScript code with functions that execute on specific events. Currently, I am working with nuxt.js and I am uncertain about where to place this file or how to establish a global method for utilizing these functions across all co ...

Guide on adding a new member to Mailchimp through node.js and express

Hello, I've been delving into working with APIs, particularly the mail-chimp API. However, I've encountered a problem that has me stuck: const express=require("express"); const bodyparser=require("body-parser"); const request=require("request" ...

Using an internal array to create a unique D3 chart

const information = [{ date: '02/03/18', value: 35, }, { date: '02/03/18', value: 89, }, [...] ]; const svgGraphics = d3.select('svg'); const margins = { top: 20, right: 20 ...

What is the best way to retrieve the index and length of an inserted or deleted string within a text area using JavaScript or jQuery?

Is there a way to determine the start and end of a change if a string is inserted or deleted from a textarea (Event)? I am aware of one solution. Save the current string Add an event listener ('change', dosomething); Compare the strings from s ...

Implementing an array of objects within a Vue method

I currently have an object called "Sorteio" which contains a vector of objects named "Resultado", consisting of 6 Resultados. The way I am creating instances of them is as follows: saveSorteio() { var data = { loteria: this.sorteio.loteria, ...

Karma is reporting an error with TypeScript, saying it cannot locate the variable 'exports'

Currently, I am in the process of mastering how to write Unit Test cases for an angular project coded in Typescript. To facilitate this, I have opted for utilizing Karma and Mocha. Below lays out the structure of the application: Project/ ├── app/ ...