OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Webpack compilation error with cypress-cucumber-preprocessor

  • Thread starter Thread starter Obr
  • Start date Start date
O

Obr

Guest
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.

Code:
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.

Code:
{
  "baseUrl": "https://reqres.in/api",
  "e2e": {
    "specPattern": "**/*.feature"
  }
}

My code file directory cypress\integration\step_definitions\users_steps.js

Code:
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 cypress\integration\features\users.feature

Code:
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

Code:
{
  "devDependencies": {
    "cypress": "^13.12.0",
    "cypress-cucumber-preprocessor": "^4.3.1"
  }
}

<p>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 <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a></p>
<p>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.</p>
<pre><code>const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
on('file:preprocessor', cucumber());
};
</code></pre>
<p>I have also modified my cypress.config.js file to specify the specPattern correctly for Cypress to find and run my .feature files.</p>
<pre><code>{
"baseUrl": "https://reqres.in/api",
"e2e": {
"specPattern": "**/*.feature"
}
}
</code></pre>
<p>My code file directory cypress\integration\step_definitions\users_steps.js</p>
<pre><code>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');
});
});
</code></pre>
<p>My feature file directory cypress\integration\features\users.feature</p>
<pre><code>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
</code></pre>
<p><em><strong>Package.json</strong></em></p>
<pre><code>{
"devDependencies": {
"cypress": "^13.12.0",
"cypress-cucumber-preprocessor": "^4.3.1"
}
}
</code></pre>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top