How can I use the new Cypress Component Test Runner for an Angular Project?

Question

I'm using Cypress for integration tests and want to use also, if it's possible, the Component Test Runner for testing single components. At the present time I only found descriptions for setting it up with React or View but not with Angular.

When I try to start node_modules/.bin/cypress open-ct I get following Error: Error: It is required to register dev-server plugin that implements `dev-server:start` event for component testing.

I tried to use the suggested implementation from Cypress in my pluginsFile:

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
}

but it still fails.

Is there a chance to get it running with Angular?

Armin Hafner Armin Hafner · Accepted Answer · 2021-04-08T10:28:24

Okay, got it fixed by myself, if somebody is interested.

I updated my index.js file in the Cypress folder to:

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
}

Installed "webpack": "^4.44.0" and "html-webpack-plugin": "4.0.0", created "webpack.config.js" with this code:

// 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"
          }
        ]
      }
    ]
  }
};

in Cypress-Folder.

Removed all node-modules and package-lock.json and did an npm i.

Now it works fine.

How can I use the new Cypress Component Test Runner for an Angular Project?

2 Answers