Error Message: Webpack Compilation Error
Module parse failed: Unexpected token (1:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Context:
I have installed cucumber package (npm install –save-dev cypress-cucumber-preprocessor)
I have updated my cypress/plugins/index.js file to configure Cypress to use the cypress-cucumber-preprocessor.
const cucumber = require('cypress-cucumber-preprocessor').default;
module.exports = (on, config) => {
on('file:preprocessor', cucumber());
};
I have also modified my cypress.config.js file to specify the specPattern correctly for Cypress to find and run my .feature files.
{
"baseUrl": "https://reqres.in/api",
"e2e": {
"specPattern": "**/*.feature"
}
}
My code file directory cypressintegrationstep_definitionsusers_steps.js
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
Given('the API is available', () => {
// Setup steps if needed
});
When('I request the first page of users', () => {
cy.request('GET', '/users?page=1').as('getUsers');
});
When('I request user with ID 2', () => {
cy.request('GET', '/users/2').as('getUser');
});
When('I submit a request to create a new user', () => {
cy.request('POST', '/users', {
name: 'John Doe',
job: 'Software Developer'
}).as('createUser');
});
Then('I should receive a 200 status code', () => {
cy.get('@getUsers').its('status').should('eq', 200);
cy.get('@getUser').its('status').should('eq', 200);
});
Then('I should receive a 201 status code', () => {
cy.get('@createUser').its('status').should('eq', 201);
});
Then('the response should contain a list of users', () => {
cy.get('@getUsers').its('body').should('have.property', 'data');
cy.get('@getUsers').its('body.data').should('be.an', 'array');
});
Then('the response should contain the user's details', () => {
cy.get('@getUser').its('body.data').should((user) => {
expect(user).to.have.property('id', 2);
expect(user).to.have.property('first_name');
expect(user).to.have.property('last_name');
expect(user).to.have.property('email');
});
});
Then('the response should contain the user's ID', () => {
cy.get('@createUser').its('body').should((user) => {
expect(user).to.have.property('id');
expect(user).to.have.property('createdAt');
});
});
My feature file directory cypressintegrationfeaturesusers.feature
Feature: Users API
Scenario: Retrieve first page of users
Given the API is available
When I request the first page of users
Then I should receive a 200 status code
And the response should contain a list of users
Scenario: Retrieve a single user by ID
Given the API is available
When I request user with ID 2
Then I should receive a 200 status code
And the response should contain the user's details
Scenario: Create a new user
Given the API is available
When I submit a request to create a new user
Then I should receive a 201 status code
And the response should contain the user's ID
Package.json
{
"devDependencies": {
"cypress": "^13.12.0",
"cypress-cucumber-preprocessor": "^4.3.1"
}
}