Cypress Rspack Dev Server

Common errors

• Error: Cannot find module '@cypress/rspack-dev-server'

  cause The package is not installed or incorrectly referenced in `cypress.config.ts`.
  fix Ensure the package is installed: `npm install --save-dev @cypress/rspack-dev-server` or `yarn add -D @cypress/rspack-dev-server`. Verify the import path in your Cypress configuration.

• TypeError: Cannot read properties of undefined (reading 'rspackConfig')

  cause The `rspackConfig` property is missing or malformed in the `devServer` options passed to `createRspackDevServer`.
  fix In your `cypress.config.ts`, ensure that `createRspackDevServer` is called with an object containing at least `framework`, `bundler`, and a valid `rspackConfig` property, e.g., `{ framework: 'react', bundler: 'rspack', rspackConfig }`.

• Error: Rspack compilation failed: Module not found: Error: Can't resolve './src/App'

  cause Your Rspack configuration's `resolve` or `module.rules` settings are not correctly configured to find your component files or their dependencies.
  fix Review the `rspackConfig` object in your `cypress.config.ts`. Check `resolve.extensions` to ensure it includes all file types your components use (e.g., '.js', '.jsx', '.ts', '.tsx') and `resolve.alias` if you use path aliases. Verify `module.rules` for correct loaders.

Warnings

• breaking Version 2.0.0-rc.1 (and subsequent RCs) introduces an upgrade to Rspack 2. This is a significant breaking change as Rspack 2 includes its own breaking changes and potentially requires adjustments to your Rspack configuration.
  Fix: Review Rspack 2 migration guides for `@rspack/core` and update your `rspackConfig` object accordingly. Test your component tests thoroughly after upgrading.
• gotcha When using interactive mode (e.g., `cypress open`), an issue was reported where `contenthash` in output filenames could lead to 404 errors. This was fixed in 1.1.2.
  Fix: Upgrade to version 1.1.2 or newer to ensure correct asset loading in interactive mode. If custom output filenames are used, avoid `[contenthash]` in the `output.filename` option within your Rspack config if experiencing 404s.
• gotcha Incorrect resolution of component index files when the Rspack configuration is located in a subdirectory was an issue in earlier versions.
  Fix: Upgrade to version 1.1.0 or newer to ensure proper resolution paths, especially if your Rspack configuration lives outside the project root.
• breaking Cypress itself has undergone significant changes in how dev servers are configured, particularly with the introduction of new `devServer` options in `cypress.config.ts`. Older configurations might not be compatible.
  Fix: Ensure your `cypress.config.ts` follows the modern Cypress `devServer` configuration pattern, passing an object with `framework`, `bundler`, and `rspackConfig` properties to the `createRspackDevServer` function. Refer to Cypress documentation for component testing `devServer` setup.

Install

• npm install cypress-rspack-dev-server npm
• yarn add cypress-rspack-dev-server yarn
• pnpm add cypress-rspack-dev-server pnpm

Imports

• createRspackDevServer
  wrong:

  const createRspackDevServer = require('@cypress/rspack-dev-server').createRspackDevServer

  correct:

  import { createRspackDevServer } from '@cypress/rspack-dev-server'

  This is the main function exported for configuring Cypress component testing with Rspack. The package ships with TypeScript types, so ESM import syntax is preferred.
• RspackConfig

  import type { RspackOptions } from '@rspack/core';
  import type { CypressRspackDevServerConfig } from '@cypress/rspack-dev-server';

  While 'RspackConfig' might not be a direct export from this package, it's common to import Rspack configuration types (RspackOptions) from '@rspack/core' for type-checking your `rspackConfig` object. This package exports Cypress-specific types like `CypressRspackDevServerConfig`.
• devServer

  import { defineConfig } from 'cypress';
  import { createRspackDevServer } from '@cypress/rspack-dev-server';
  
  export default defineConfig({
    component: {
      devServer: createRspackDevServer,
    },
  });

  The `devServer` property in `cypress.config.ts` expects a function reference, which `createRspackDevServer` provides. Do not call the function directly here; Cypress will call it with the appropriate options.

Quickstart

This quickstart demonstrates how to configure Cypress to use `cypress-rspack-dev-server` for component testing with a basic Rspack configuration. It sets up the `devServer` in `cypress.config.ts` to use `createRspackDevServer` and provides a minimal `rspackConfig` object, including SWC loader for TypeScript/JSX.

import { defineConfig } from 'cypress';
import { createRspackDevServer } from '@cypress/rspack-dev-server';
import { Configuration as RspackConfiguration } from '@rspack/core';

const rspackConfig: RspackConfiguration = {
  // Your Rspack configuration for component testing
  mode: 'development',
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)$/,
        exclude: /node_modules/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
              jsx: true,
            },
            transform: {
              react: {
                runtime: 'automatic',
              },
            },
          },
        },
      },
    ],
  },
  // Add any other Rspack specific configurations here
};

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'rspack',
      rspackConfig,
    },
    devServer: createRspackDevServer,
    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});