rstackjs · 9aoy · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rstest/rspack-adapter/.gitignore b/rstest/rspack-adapter/.gitignore
@@ -0,0 +1,16 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# Profile
+.rspack-profile-*/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
diff --git a/rstest/rspack-adapter/README.md b/rstest/rspack-adapter/README.md
@@ -0,0 +1,36 @@
+# Rspack project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+## Get started
+
+Start the dev server, and the app will be available at <http://localhost:8080>.
+
+```bash
+npm run dev
+```
+
+Build the app for production:
+
+```bash
+npm run build
+```
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Learn more
+
+To learn more about Rspack, check out the following resources:
+
+- [Rspack documentation](https://rspack.rs) - explore Rspack features and APIs.
+- [Rspack GitHub repository](https://github.com/web-infra-dev/rspack) - your feedback and contributions are welcome!
diff --git a/rstest/rspack-adapter/index.html b/rstest/rspack-adapter/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/react.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rspack + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/rstest/rspack-adapter/package.json b/rstest/rspack-adapter/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@rstest-example/rspack-adapter",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rspack build",
+    "dev": "rspack dev",
+    "preview": "rspack preview",
+    "test": "rstest",
+    "test:watch": "rstest --watch"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.4.5",
+    "@rspack/cli": "2.0.0-beta.5",
+    "@rspack/core": "2.0.0-beta.5",
+    "@rspack/dev-server": "2.0.0-beta.5",
+    "@rspack/plugin-react-refresh": "^1.6.1",
+    "@rstest/adapter-rspack": "^0.2.0",
+    "@rstest/core": "^0.9.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "happy-dom": "^20.8.3",
+    "react-refresh": "^0.18.0",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/rstest/rspack-adapter/rspack.config.ts b/rstest/rspack-adapter/rspack.config.ts
@@ -0,0 +1,56 @@
+import { defineConfig } from '@rspack/cli';
+import { rspack, type SwcLoaderOptions } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+
+const isDev = process.env.NODE_ENV === 'development';
+
+export default defineConfig({
+  entry: {
+    main: './src/main.tsx',
+  },
+  target: ['browserslist:last 2 versions, > 0.2%, not dead, Firefox ESR'],
+  resolve: {
+    extensions: ['...', '.ts', '.tsx', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        type: 'asset',
+      },
+      {
+        test: /\.css$/,
+        type: 'css/auto',
+      },
+      {
+        test: /\.(jsx?|tsx?)$/,
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                    development: isDev,
+                    refresh: isDev,
+                  },
+                },
+              },
+            } satisfies SwcLoaderOptions,
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    ...(isDev ? [new ReactRefreshRspackPlugin()] : []),
+  ],
+});
diff --git a/rstest/rspack-adapter/rstest.config.mts b/rstest/rspack-adapter/rstest.config.mts
@@ -0,0 +1,8 @@
+import { withRspackConfig } from '@rstest/adapter-rspack';
+import { defineConfig } from '@rstest/core';
+
+// Docs: https://rstest.rs/config/
+export default defineConfig({
+  extends: withRspackConfig(),
+  setupFiles: ['./tests/rstest.setup.ts'],
+});
diff --git a/rstest/rspack-adapter/src/App.css b/rstest/rspack-adapter/src/App.css
@@ -0,0 +1,41 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a > .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/rstest/rspack-adapter/src/App.tsx b/rstest/rspack-adapter/src/App.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import reactLogo from './assets/react.svg';
+import './App.css';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Rspack + React + TypeScript</h1>
+      <div className="card">
+        <button type="button" onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">Click on the Rspack and React logos to learn more</p>
+    </div>
+  );
+}
+
+export default App;
diff --git a/rstest/rspack-adapter/src/assets/react.svg b/rstest/rspack-adapter/src/assets/react.svg
diff --git a/rstest/rspack-adapter/src/index.css b/rstest/rspack-adapter/src/index.css
@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/rstest/rspack-adapter/src/main.tsx b/rstest/rspack-adapter/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Failed to find the root element');
+}
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/rstest/rspack-adapter/tests/index.test.tsx b/rstest/rspack-adapter/tests/index.test.tsx
@@ -0,0 +1,9 @@
+import { expect, test } from '@rstest/core';
+import { render, screen } from '@testing-library/react';
+import App from '../src/App';
+
+test('renders the main page', () => {
+  const testMessage = 'Rspack + React + TypeScript';
+  render(<App />);
+  expect(screen.getByRole('heading', { name: testMessage })).toBeInTheDocument();
+});
diff --git a/rstest/rspack-adapter/tests/rstest.setup.ts b/rstest/rspack-adapter/tests/rstest.setup.ts
@@ -0,0 +1,5 @@
+import { expect } from '@rstest/core';
+// biome-ignore lint/performance/noNamespaceImport: jest-dom matchers are consumed as a matcher namespace.
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);
diff --git a/rstest/rspack-adapter/tests/tsconfig.json b/rstest/rspack-adapter/tests/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["@testing-library/jest-dom"]
+  },
+  "include": ["./"]
+}
diff --git a/rstest/rspack-adapter/tsconfig.json b/rstest/rspack-adapter/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}