如何在Quasar 2(Vue 3)和Vite中使cypress-cucumber-preprocessor工作?

huangapple go评论62阅读模式
英文:

How to get cypress-cucumber-preprocessor working with Quasar 2 (Vue 3) and Vite

问题

我已经使用 Quasar 2(Vue3)和 Cypress 12.9.0 设置了一个新项目。我没有使用 TypeScript。

Quasar @quasar/testing-e2e-cypress@beta 提供的默认 home.cy.js 测试正常工作。:-)

现在我想添加 @badeball/cypress-cucumber-preprocessor 插件,以便使用 Cucumber BDD 功能。

@badeball/cypress-cucumber-preprocessor 文档中有各种构建平台的示例,但没有针对 Vite 的示例。也许我对我需要什么有误解?

这是示例 cypress.config.js如果我使用 esbuild,我需要将其更改为使用 Vite。当然,这不会起作用,但提供了一个示例起点。

const { defineConfig } = require('cypress');
const { injectQuasarDevServerConfig } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor')

// FIX: This is the esbuild version, not Vite
const { createBundler } = require('@bahmutov/cypress-esbuild-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');


module.exports = defineConfig({
  fixturesFolder: 'test/cypress/fixtures',
  screenshotsFolder: 'test/cypress/screenshots',
  videosFolder: 'test/cypress/videos',
  video: true,

  e2e: {
    async setupNodeEvents (on, config) {
      // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
      await addCucumberPreprocessorPlugin(on, config);

      on(
        "file:preprocessor",

        // FIX: This is the esbuild version, not Vite
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

      return config;
    },
    baseUrl: 'http://localhost:9000/',
    supportFile: 'test/cypress/support/e2e.js',
    specPattern: 'test/cypress/e2e/**/*.feature'
  }
});

有没有人在上述描述的 Quasar Vite 环境中设置过这个?感谢!Murray

英文:

I have set up a new project using Quasar 2 (Vue3) with Vite and Cypress 12.9.0. I am not using Typescript.

The default home.cy.js test supplied by the Quasar @quasar/testing-e2e-cypress@beta setup works correctly. 如何在Quasar 2(Vue 3)和Vite中使cypress-cucumber-preprocessor工作?

I now want to add the @badeball/cypress-cucumber-preprocessor plugin so I have Cucumber BDD functionality.

In the @badeball/cypress-cucumber-preprocessor docs there are examples for various build platforms but none for Vite. Perhaps I am misunderstanding what I need?

This is the example cypress.config.js if I was using esbuild and I need to change that to use Vite. Of course this wont work, but is provided as an example starting point.

const { defineConfig } = require('cypress');
const { injectQuasarDevServerConfig } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor')

// FIX: This is the esbuild version, not Vite
const { createBundler } = require('@bahmutov/cypress-esbuild-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');


module.exports = defineConfig({
  fixturesFolder: 'test/cypress/fixtures',
  screenshotsFolder: 'test/cypress/screenshots',
  videosFolder: 'test/cypress/videos',
  video: true,

  e2e: {
    async setupNodeEvents (on, config) {
      // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
      await addCucumberPreprocessorPlugin(on, config);

      on(
        "file:preprocessor",

        // FIX: This is the esbuild version, not Vite
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

      return config;
    },
    baseUrl: 'http://localhost:9000/',
    supportFile: 'test/cypress/support/e2e.js',
    specPattern: 'test/cypress/e2e/**/*.feature'
  }
});

Has anyone set this up with the Quasar Vite environment as described above?

Thanks! Murray

答案1

得分: 3

以下是您要翻译的内容:

从这里开始 为什么选择 Vite

> Vite 使用 esbuild 预先捆绑依赖项。esbuild 是用 Go 编写的,比基于 JavaScript 的捆绑工具预先捆绑依赖项快 10 到 100 倍。

我按照您描述的方式运行了示例 Quasar 应用程序,唯一的区别是删除了此导入的大括号:

// cypress.config.js

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')

在安装 @badeball/cypress-cucumber-preprocessorcypress-esbuild-preprocessor 包时,我不得不安装 esbuild 以解决错误。

home.cy.js 转换为一个特性:

// home.feature

Feature: quaser 示例主页
  Scenario: 访问首页
    When 我访问 Quasar 应用
    Then 我应该看到一个搜索栏
// home.js

import { When, Then } from "@badeball/cypress-cucumber-preprocessor";

When("我访问 Quasar 应用", () => {
  cy.visit("/");
});

Then("我应该看到一个搜索栏", () => {
  cy.title().should("include", "Quasar");
})

这个运行正常

如何在Quasar 2(Vue 3)和Vite中使cypress-cucumber-preprocessor工作?

我对 Quasar-Cypress 插件不太确定,不确定它是否需要其他设置。但是“正常”的 Cucumber 在 e2e 模式下似乎可以正常工作。

@badeball/cypress-cucumber-preprocessor 上存在一个问题,他似乎说 Vite + 组件测试不可能。我还没有深入研究这个问题,因为您似乎只是针对 e2e 测试。

英文:

From here Why Vite

> Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.

I ran up the sample Quasar app as you describe, the only difference was removing the braces for this import:

// cypress.config.js

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')

During install of either @badeball/cypress-cucumber-preprocessor or cypress-esbuild-preprocessor packages I had to install esbuild to overcome an error.

Converted home.cy.js to a feature:

// home.feature

Feature: quaser sample home
  Scenario: visiting the frontpage
    When I visit Quasar App
    Then I should see a search bar
// home.js

import { When, Then } from "@badeball/cypress-cucumber-preprocessor";

When("I visit Quasar App", () => {
  cy.visit("/");
});

Then("I should see a search bar", () => {
  cy.title().should("include", "Quasar");
})

which ran ok

如何在Quasar 2(Vue 3)和Vite中使cypress-cucumber-preprocessor工作?

I'm not sure about the Quasar-Cypress add-on, if that entails some other setup. But "Normal" cucumber in e2e mode seems to work ok.

There is an issue on @badeball/cypress-cucumber-preprocessor where he seems to say that Vite + component testing isn't possible. I haven't dived into that rabbit hole, as you seem to be aiming for e2e testing only.

huangapple
  • 本文由 发表于 2023年4月17日 07:38:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76030846.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定