Vuejs期间的WebPack错误，用于E2E测试

Question

对我的英语技巧不好，我感到抱歉。我尝试为VUEJS编写E2E测试。我正在使用柏树。但是有一个问题。这个问题是一个WebPack错误。导入第三个软件包后发生错误。

我的柏树测试：

      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');
      });

我的cypress.json文件：

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

我的柏树的插件文件

 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'
  })
}

我的包装版本：

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

在运行 vue-cli-service测试后，抛出以下错误

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

：错误 ？

编辑：

为此问题开了一个线程。 在这里

Answer 1

看起来最新版本的faker-js将无法与柏树一起使用。

请注意，柏树文档在这里显示导入Faker库：

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

@Faker-JS/Faker的最新版本是 @7.2.0，如果您降至 @6.3.0，则规格将起作用。

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

或使用纱

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

---

插件，以解决 @faker-js/ [email＆nbsp; protected] （Cypress v9 cconfig）

此对cypress/plugins/index.js的补充将允许最新版本的Faker工作。

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'
  })
}

---

柏树版本10+配置的更新

请注意围绕webpack-preprocessor的柏树文档仍然具有旧配置。

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));
    },
  },
})