如何在 Angular 项目中使用新的 Cypress 组件测试运行程序？

Question

我正在使用 Cypress 进行集成测试，如果可能的话，还想使用 Component Test Runner 来测试单个组件。目前我只找到了使用 React 或 View 设置它的描述，但没有找到使用 Angular 的描述。

当我尝试启动时node_modules/.bin/cypress open-ct出现以下错误： Error: It is required to register dev-server plugin that implements `dev-server:start` event for component testing.

我尝试在我的插件文件中使用 Cypress 的建议实现：

const { startDevServer } = require('@cypress/webpack-dev-server')
const webpackConfig = require('../webpack.config.js')

module.exports = (on, config) => {
  on('dev-server:start', (options) => {
    return startDevServer({ options, webpackConfig })
  })

  return config
}

但它仍然失败。

有机会让它与 Angular 一起运行吗？

Answer 1

好吧，如果有人感兴趣的话，我自己解决了。

我将 Cypress 文件夹中的 index.js 文件更新为：

const { startDevServer } = require('@cypress/webpack-dev-server')
const webpackConfig = require('../webpack.config.js')

module.exports = (on, config) => {
  on('dev-server:start', (options) => {
    return startDevServer({ options, webpackConfig })
  })

  return config
}

安装了“webpack”：“^4.44.0”和“html-webpack-plugin”：“4.0.0”，使用以下代码创建了“webpack.config.js”：

// cypress/webpack.config.js
module.exports = {
  resolve: {
    extensions: [".ts", ".js"]
  },
  node: { fs: "empty", child_process: "empty", readline: "empty" },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
          loader: "ts-loader"
          }
        ]
      }
    ]
  }
};

在 Cypress 文件夹中。

删除了所有节点模块和 package-lock.json 并执行了npm i.

现在效果很好。