Cypress Component Testing with BDD

[antonsamper]

Current behaviour

Cypress has a relatively new way of testing components in isolation:
https://docs.cypress.io/guides/component-testing/introduction#Install

The setup for this is somewhat convoluted and requires webpack-dev-server (and other dependencies) to be installed. I think that as a result of this, the way that the tests are run (using cypress open-ct), is incompatible with this plugin.

In my particular case i see the following error:

ERROR in ./cypress/integration/features/button.feature 3:21
Module parse failed: Unexpected token (3:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Desired behaviour

In case I have missed something, it would be great to document how to use this plugin when doing component testing if its possible.

[andrew-cunliffe]

This would be really helpful as you can then write the component test steps alongside the components then for the integration tests use the exact same steps which you have designed and tested on the components!

[Ked57]

any news on this ? I tried using it for component testing but I get this kind of error

[badeball]

Due to personal reasons, the previous maintainers of this package are stepping down and handing the reigns over to me, a long-time contributor to the project and a user of it myself. This is a responsibility I'm very excited about. Furthermore, I'd like to thank @lgandecki ++ for all the work that they've done so far.

Read more about the transfer of ownership here.

The repository has however moved and all outstanding issues are being closed. This is not a reflection of the perceived importance of your reported issue. However, if after upgrading to the new version, you still find there to be an issue, feel free to open up another ticket or comment below. Please make sure to read CONTRIBUTING.md before doing so.

[iko-danielo-zen]

how i can use the "cypress-cucumber-preprocessor" with open-ct?
@badeball

[badeball]

I imagine it would be pretty straight forward. Have you tried?

[iko-danielo-zen]

yes... i get configuration errors and would like and example to help me set it up.

[badeball]

Lmao, you don’t get to make that kind of request. What have you tried so far?

[iko-danielo-zen]

cucumber works fine for the integration tests. but not the component tests.
it tells me it does not know how to handles the .features files or can not find the tests.

what configuration settings should i use?

i have tired any combination of cypress.json settings i thought would help.
nothing i add to the "components" section seems to help either.
including the cypress-cucumber-preprocessor settings in package.json

[badeball]

I'm blocked from trying ut component testing myself, ref. cypress-io/cypress#19337, but what you essentially have to do is create your own webpack.config.js and configure a loader like shown here: https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/examples/webpack/cypress/plugins/index.ts#L25-L33.

[LewisCollum]

@iko-danielo-zen Refer to https://docs.cypress.io/guides/references/migration-guide#3-Update-plugins-file-to-use-dev-server-start for getting component tests to work with webpack. The suggested change (from the link provided) from

const webpackPreprocessor = require('@cypress/webpack-preprocessor')
const webpackConfig = require('../webpack.config.js')

module.exports = (on, config) => {
  on('file:preprocessor', webpackPreprocessor(options))
}

to

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

module.exports = (on, config) => {
  // You must use the dev-server:start event instead of the file:preprocessor event

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

got me closer to working component tests.

I was able to get component tests npx cypress run-ct and integration tests npx cypress run passing with the configs I provided here #700.

[oguzhantx]

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

@LewisCollum i am getting this error when I make this change.

I also reviewed your example repo from #700 but since it is written with ts and we use js, I am kind of stuck. Any suggestion to get component testing working with cucumber and cypress 10?