BDD 與 Cypress & Vite (Vue 3) & Cucumber

Question

我目前已設法在 Vitejs + Vue 3 中實現 Cucumber BDD 測試，如下所示：

我啟動並運行開發服務器：

$ yarn dev

然后在單獨的 window 中運行賽普拉斯測試運行程序：

$ yarn cy:run

對應於：

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

在我的 package.json 中。 這個的output，是1次測試通過。

到目前為止，一切都很好。 然后我遇到了@cypress/vite-dev-server package，並使用 /cypress/plugins/index.ts 中的/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 package 不接受我試圖用 Cypress 和 Cucumber 做的事情。

有沒有人設法讓 Cypress 和 Cucumber BDD 與 Vite 無縫協作？

我還查看了wait-on模塊，運行以下命令：

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

但它似乎沒有等待，只有Vite服務器運行？ 所以我不能再運行我需要的 cypress 命令......

Answer 1

@cypress/vite-dev-server用於組件測試，而不是 e2e 測試。 另一方面， cypress-cucumber-preprocessor用於編譯 e2e 規范。 在 e2e 測試中，應用程序獨立於測試運行，因此您可以使用vite來運行開發服務器，但它與測試無關。 如果你想使用vite配置來編譯測試，你可以使用cypress-vite而不是cypress-cucumber-preprocessor 。