Ship craco (CRA config override) adapter in `cypress/react`

I use craco for react, so I can use Less with create-react-app

It replaces react-scripts start with craco start, so that the Less gets bundled to css.

When using cypress normally, it’s all good, because I start up the web server, and then it just gets served from there.

With the component runner however, it just renders the components directly. How can i make the styles work? If I mount a component that directly imports the App.less file, it obviously makes no difference.

[lmiller1990]

Right, this makes perfect sense - using the react-scripts plugin to inject the dev server grabs the unconfigured webpack config from CRA - the whole point of craco is to override that.

I looked into this and learned I can use the craco webpack API, specifically createWebpackDevConfig, to get the modified config.

I wrote this code and was able to get the less styling to work with Cypress. The following is in cypress/plugins/index.js.

const { createWebpackDevConfig } = require("@craco/craco");
const { startDevServer } = require('@cypress/webpack-dev-server')

const cracoConfig = require("../../craco.config.js");
const webpackConfig = createWebpackDevConfig(cracoConfig);

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

  return config
}

I think we can justify bundling a craco plugin with @cypress/react. I will work on shipping this. For now, you could use the above snippet.

Please let me know if this is working for you.

[ghost]

const cracoConfig = require("../../craco.config.js");
const webpackConfig = createWebpackDevConfig(cracoConfig);

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

  return conf

It works, thank you!