使用 cypress 進行 e2e 測試的 vuejs 期間出現 Webpack 錯誤

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"
}

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

我的軟件包版本：

"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 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

可能是導致錯誤的版本嗎？

編輯：

已針對此問題打開了一個線程。 這里

Answer 1

看起來最新版本的faker-js不適用於 Cypress。

請注意， 此處的賽普拉斯文檔顯示了一種導入 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/faker@6.3.0 --save-dev

或用yarn

yarn remove @faker-js/faker 
yarn add @faker-js/faker@6.3.0 -D

測試

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

---

用於解析@faker-js/faker@7.2.0 的插件

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