BDD 与 Cypress & Vite (Vue 3) & Cucumber

Question

我目前已成功在 Vitejs + Vue 3 中实现 Cucumber BDD 测试，如下所示：

我使用以下命令启动并运行开发服务器：

$ yarn dev

然后在一个单独的窗口中运行 Cypress 测试运行程序：

$ yarn cy:run

对应于：

$ yarn dev

在我的 package.json 中。其输出是 1 次测试通过。

到目前为止，一切都很好。然后我发现了这个@cypress/vite-dev-server包，并用里面的黄瓜预处理器实现了它，/cypress/plugins/index.ts如下所示：

/// <reference types="cypress" />
const path = require('path')
const { startDevServer } = require('@cypress/vite-dev-server')
const browserify = require('@cypress/browserify-preprocessor')
const cucumber = require('cypress-cucumber-preprocessor').default

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
  on('dev-server:start', options => {
    return startDevServer({
      options,
      viteConfig: {
        configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts')
      }
    })
  })

  const cucumberOptions = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript')
  }

  on('file:preprocessor', cucumber(cucumberOptions))

  return config
}

所以，看起来这个@cypress/vite-dev-server包不接受我试图用 Cypress & Cucumber 做的事情。

有人成功让 Cypress & Cucumber BDD 与 Vite 无缝协作吗？

我还查看了该wait-on模块，运行以下命令：

yarn dev & wait-on http://localhost:8099

但好像并没有等待，只有Vite服务器在运行？所以我无法运行我需要的 cypress 命令......

Answer 1

这@cypress/vite-dev-server是用于组件测试，而不是端到端测试。另一方面cypress-cucumber-preprocessor用于编译 e2e 规范。在 e2e 测试中，应用程序独立于测试运行，因此您可以用于vite运行开发服务器，但它与测试无关。如果您想使用vite配置来编译测试，您可以使用cypress-vite而不是cypress-cucumber-preprocessor.