很抱歉我的英语水平不好.我try 为vuejs编写e2e测试.我用 cypress 来做这个.但有一个问题.此问题是网页包错误.导入thirdy包后发生错误.

我的 cypress 测试:

      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

可能是版本导致了错误?

推荐答案

看起来最新版本的faker-js不会与Cypress一起使用.

请注意,Cypress文档here显示了导入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

Test

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

Plugin to resolve for @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'
  })
}

Vue.js相关问答推荐

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径?

为什么我的数组在 onBeforeMount 函数中不为空,但在 onMounted 函数中为空

VueI18n 无法读取或更改组合 API 中的区域设置

如何在 Vuetify 2 中的轮播项目上放置 href 属性?

我需要在 nuxt2 上使用 /index 作为 url 的一部分

VueJS 中的 VisJS 时间轴:带有图像的项目放错了位置

通过元素加中的正则表达式输入电话号码格式

vue 计算的 ant watch 不会在嵌套属性更改时触发

v-slot: activator 中 {attrs} 参数的作用是什么?

Axios Intercept 在第一次调用时未从 localStorage 应用令牌

Vue:需要禁用页面上的所有输入

如何有条件地更改 vue/vuetify 文本字段 colored颜色

v-model 不会检测到 jQuery 触发事件所做的更改

Vue 3 - 带有全局组件的无法解析组件

Vue devServer 代理没有帮助,我仍然收到 CORS 错误

在 Vue.js 模板中调用函数

Vue Cli 3:定义的输出路径

带有 Google Auth Signin 的 Vuejs 全局函数

升级到 vue-cli 3 后,HTML 中的空格消失了

将它们分开时将 Django 的 csrf_token 放入 Vuejs