use rspack for cypress component testing

RedHatInsights · Oct 2, 2024 · 37eb771 · 37eb771
1 parent a9c8ef4
commit 37eb771
Show file tree

Hide file tree

Showing 4 changed files with 476 additions and 213 deletions.
diff --git a/config/webpack.cy.config.js → config/rspack.cy.config.js b/config/webpack.cy.config.js → config/rspack.cy.config.js
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const { createJoinFunction, createJoinImplementation, asGenerator, defaultJoinGenerator } = require('resolve-url-loader');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { ModuleFederationPlugin } = require('webpack').container;
 const searchIgnoredStyles = require('@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles');
+const { defineConfig } = require('@rspack/cli');
+const rspack = require('@rspack/core');
 
 // call default generator then pair different variations of uri with each base
 const PFGenerator = asGenerator((item, ...rest) => {
@@ -19,39 +19,37 @@ const PFGenerator = asGenerator((item, ...rest) => {
 });
 
 /** @type { import("webpack").Configuration } */
-const JSConfig = {
+const JSConfig = defineConfig({
+  experiments: {
+    css: true,
+  },
   module: {
     rules: [
       {
         test: /\.(js|ts)x?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'swc-loader',
+          loader: 'builtin:swc-loader',
           options: {
             jsc: {
-              experimental: {
-                plugins: [
-                  [
-                    'swc-plugin-coverage-instrument',
-                    {
-                      compact: false,
-                    },
-                  ],
-                ],
-              },
               parser: {
                 syntax: 'typescript',
                 tsx: true,
               },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  development: true,
+                },
+              },
             },
           },
         },
       },
       {
         test: /\.s?[ac]ss$/,
+        type: 'css/auto',
         use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
           {
             loader: 'resolve-url-loader',
             options: {
@@ -62,6 +60,8 @@ const JSConfig = {
             loader: 'sass-loader',
             options: {
               sourceMap: true,
+              api: 'modern-compiler',
+              implementation: require.resolve('sass-embedded'),
             },
           },
         ],
@@ -73,31 +73,23 @@ const JSConfig = {
     ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['...', '.tsx', '.ts', '.js'],
     alias: {
       ...searchIgnoredStyles(path.resolve(__dirname, '../')),
+      '@rhds/icons': path.resolve(__dirname, '../node_modules/@rhds/icons'),
     },
   },
   output: {
     filename: 'bundle.js',
     hashFunction: 'xxhash64',
     path: path.resolve(__dirname, 'dist'),
   },
-  cache: {
-    type: 'filesystem',
-    buildDependencies: {
-      config: [__filename],
-    },
-    cacheDirectory: path.resolve(__dirname, '../.cypress-cache'),
-  },
+  cache: true,
   stats: {
     errorDetails: true,
   },
   plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].[contenthash].css',
-    }),
-    new ModuleFederationPlugin({
+    new rspack.container.ModuleFederationPlugin({
       name: 'chrome',
       filename: 'chrome.js',
       shared: [
@@ -114,6 +106,6 @@ const JSConfig = {
       ],
     }),
   ],
-};
+});
 
 module.exports = JSConfig;
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { defineConfig } from 'cypress';
 const { addMatchImageSnapshotPlugin } = require('@simonsmith/cypress-image-snapshot/plugin');
+import { devServer } from 'cypress-rspack-dev-server';
 
 export default defineConfig({
   component: {
@@ -26,11 +27,17 @@ export default defineConfig({
       return config;
     },
     video: false,
-    devServer: {
-      framework: 'react',
-      bundler: 'webpack',
-      webpackConfig: require('./config/webpack.cy.config.js'),
+    devServer(devServerConfig) {
+      return devServer({
+        ...devServerConfig,
+        framework: 'react',
+        rspackConfig: require('./config/rspack.cy.config.js'),
+      });
     },
+    // devServer: {
+    //   framework: 'react',
+    //   bundler: 'webpack',
+    // },
   },
   e2e: {
     blockHosts: ['consent.trustarc.com'],