Cypress Component testing with Dazzle (Insert in cypress/plugins/index.ts)

cypress-plugins-index.ts

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

import path from 'path';

import { startDevServer } from '@cypress/webpack-dev-server';

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

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = ((on, config) => {
  if (config.testingType === 'component') {
    on('dev-server:start', async (options) => {
      const { razzle, razzleOptions, webpackObject, plugins, paths } =
        await loadRazzleConfig(webpack);
      if (!razzleOptions.verbose) {
        process.removeAllListeners('warning');
      }
      const isClientOnly = true;
      await setPorts(isClientOnly);
      const webpackConfig = await createConfigAsync(
        'web',
        'dev',
        razzle,
        webpackObject,
        isClientOnly,
        paths,
        plugins,
        {
          ...razzleOptions,
          // apparently cypress breaks with react fast refresh
          enableReactRefresh: false
        }
      );
      // add the cypress folders to the "js" module rules
      webpackConfig.module.rules[0].include.push(
        path.join(paths.appSrc, '../cypress')
      );
      webpackConfig.devServer = undefined;
      // need to remove the dev-server JS that's inserted by razzle here
      // https://github.com/jaredpalmer/razzle/blob/0b3b13ad755cf03d37aec3a39976715c1ff034f3/packages/razzle/config/createConfigAsync.js#L808
      webpackConfig.entry.client.splice(0, 1);
      return startDevServer({
        options,
        webpackConfig
      });
    });
    config.env.reactDevtools = true;
  }
  return config;
}) as Cypress.PluginConfig;