Cypress component testing with razzle

[drostano]

Has anyone managed to get cypress component testing working with razzle?

If so, what webpack config are you pointing plugins/index.ts/js to?

e.g. my best guess was (not working):

config.env.webpackFilename = "./node_modules/razzle/config/createConfigAsync.js"

[fivethreeo]

// webpack.config.js
const webpack = require('webpack');
const createConfig = require('razzle/config/createConfigAsync');
const loadRazzleConfig = require('razzle/config/loadRazzleConfig');
const setPorts = require('razzle-dev-utils/setPorts');

const configPromise = new Promise(function (resolve, reject) {

    loadRazzleConfig(webpack)
        .then(
            async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {
                verbose = razzleOptions.verbose;
                if (!verbose) {
                    process.removeAllListeners('warning');
                }
                const clientOnly = true;

                process.env.BUILD_TYPE = razzleOptions.buildType;

                setPorts(clientOnly).then(async () => {
                    resolve(await createConfig(
                        'web',
                        'dev',
                        razzle,
                        webpackObject,
                        clientOnly,
                        paths,
                        plugins,
                        razzleOptions
                    ));
                })
            })
});

module.exports = configPromise

// usage

const webpack = require('@cypress/webpack-preprocessor')
const getConfig = require('webpack.config')

module.exports = (on) => {
  return getConfig().then((webpackConfig) => {
    on('file:preprocessor', webpack(webpackConfig))
  })
}

https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/preprocessors__typescript-webpack/cypress/plugins/index.js

[fivethreeo]

#1531

[drostano]

Very good, thanks. This certainly gets the webpack config as required by cypress ct

I just had to make a few modifications as follows to my setup (through trial and error, may not be optimal - it may be due to my config being pretty hacked up)

Reason was 1) It says getConfig must return a function, 2) It says needs webpack needs to return a dev-server:start or something

Don't know - but it's working so I'm not touching it

webpack.config.js

// prev: 
// const configPromise = new Promise(function (resolve, reject) {

// new: (return func)
const configPromise = () => new Promise(function (resolve, reject) {
// .. 
}

plguins/index.ts

const {startDevServer} = require("@cypress/webpack-dev-server")
// const webpack = require("@cypress/webpack-preprocessor")
const getConfig = require("../../webpack.config")

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
	if (config.testingType === "component") {
		on("dev-server:start", options => {
			return getConfig().then(webpackConfig => {
				return startDevServer({options, webpackConfig})
			})
		})
		return config
	}

	// Doc [2021-06-20, Sun, 14:46]
	//
	// ELSE, NOT component testing, fire rest of plugins:
	// 
	// mocha awesome 
	// db seed 
	// coverage
	// babel plugins
	// ....
	

[SimeonC]

I also had to modify the code everyone else posted as of cypress 8.2.0 so I made a gist so I don't forget. (Thanks for the other code which helped a lot getting started)
There may be a few things that are specific to my modifications of razzle but it might help anyone else who's getting weird errors. One thing I did have to do was make sure to remove all the devServer config that razzle puts in so that cypress could inject theirs. Otherwise hot reloading didn't work.

https://gist.github.com/SimeonC/72f9d0336556416692714689e27c59bb

[fivethreeo]

Got any ideas on #1700 , E2E testing?