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

Question

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

当我尝试启动 node_modules/.bin/cypress open-ct 时，出现以下错误:错误:需要注册实现 `dev-server:start` 事件的 dev-server 插件才能进行组件测试。

我尝试在我的插件文件中使用 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。

现在一切正常了。