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 ?
Edit:
There is a thread opened for this problem. Here
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
This addition for cypress/plugins/index.js
will allow the latest version of faker to work.
const webpackPreprocessor = require("@cypress/webpack-preprocessor");
module.exports = (on) => {
const options = webpackPreprocessor.defaultOptions;
options.webpackOptions.module.rules[0].exclude = {
and: [/node_modules/],
not: [/@faker-js/],
};
options.webpackOptions.resolve = {
alias: {
"@faker-js/faker": require.resolve("@faker-js/faker"),
},
};
on("file:preprocessor", webpackPreprocessor(options));
// original content
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'
})
}
Note the Cypress docs around webpack-preprocessor
still have the old configuration.
import { defineConfig } from 'cypress'
const webpackPreprocessor = require("@cypress/webpack-preprocessor");
const options = webpackPreprocessor.defaultOptions;
options.webpackOptions.module.rules[0].exclude = {
and: [/node_modules/],
not: [/@faker-js/],
};
options.webpackOptions.resolve = {
alias: {
"@faker-js/faker": require.resolve("@faker-js/faker"),
},
};
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on("file:preprocessor", webpackPreprocessor(options));
},
},
})