Webpack error during vuejs with cypress for e2e test-CodePudding

I am sorry for my bad English skill. I try to write e2e test for vuejs. I am using cypress for that. But there is a problem. This problem is a webpack error. The error occurs after import a thirdy package.

My cypress test:

      import { faker } from '@faker-js/faker';

      const username = faker.internet.userName();
      const password = faker.internet.password();
      it('form elements should be correct', () => {
        cy.get(userLoginElement.username).type(username).should('have.value', username);
        cy.get(userLoginElement.password).type(password).should('have.value', password);
        cy.get(userLoginElement.loginButton).should('exist');
      });

My cypress.json file:

{
  "pluginsFile": "tests/e2e/plugins/index.js",
  "baseUrl": "http://127.0.0.1:8080"
}

My plugin file of cypress

 module.exports = (on, config) => {
  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

My versions of the packages:

"faker": "^6.6.6",
 "@vue/cli-plugin-e2e-cypress": "~5.0.0",
 "@vue/cli-plugin-unit-jest": "~5.0.0",
"cypress": "^8.3.0",

Throw below error after running vue-cli-service test:e2e

Error: Webpack Compilation Error
./node_modules/@faker-js/faker/dist/esm/chunk-4J2PVEV7.mjs 1:1430
Module parse failed: Unexpected token (1:1430)
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

May it be the version that reasons of the error ?

CodePudding user response：

It looks like the latest version of faker-js will not work with Cypress.

Notice the Cypress documentation here shows an old way of importing the faker library:

import faker from "faker" // NOTE - no longer valid for recent versions of faker-js

The latest version of @faker-js/faker is @7.2.0, if you down-grade to @6.3.0 the spec will work.

npm remove @faker-js/faker 
npm install @faker-js/[email protected] --save-dev

or with yarn

yarn remove @faker-js/faker 
yarn add @faker-js/[email protected] -D

Test

import { faker } from '@faker-js/faker';     // import is ok with version @6.3.0

CodePudding user response：

There is a thread opened for this problem. Here