BDD 与 Cypress & Vite (Vue 3) & Cucumber答案

【问题标题】：BDD with Cypress & Vite (Vue 3) & CucumberBDD 与 Cypress & Vite (Vue 3) & Cucumber
【发布时间】：2022-07-28 14:51:09
【问题描述】：

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

我启动并运行开发服务器：

$ yarn dev

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

$ yarn cy:run

对应于：

  ...,
  "scripts": {
    ...
    "cy:run": "cypress run -q",
    ...
  },
  ...

在我的 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 命令...

【问题讨论】：

嗨！同样的问题在这里，我也在使用 NX (monorepo)。就我而言，即使应用程序启动赛普拉斯也不会。您是否找到了可行的解决方案？

标签： vue.js cucumber cypress vuejs3 vite

【解决方案1】：

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

【讨论】：