CODEWITHSUNDEEP
angularcypress
Armin Hafner
Armin Hafner

Reputation: 71

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

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?

Upvotes: 2

Views: 3465

Answers (2)

tianjianchn
tianjianchn

Reputation: 721

I faced this problem once using Cypress component testing in a more complicated way, by wrapping it in another package.

Anyway, if you have tried using --config '<config>' option, make sure <config> is not like {"component": {"pluginsFile": "path/to/index.js", ...}}. Hoist the options in component to the top level, like {"pluginsFile": "path/to/index.js", ...}, otherwise Cypress will try to generate both empty Cypress.json and cypress/plugins/index.js files.

Upvotes: 0

Armin Hafner
Armin Hafner

Reputation: 71

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.

Upvotes: 5

Related Questions