diff --git a/rsbuild/react-jest/.gitignore b/rsbuild/react-jest/.gitignore new file mode 100644 index 00000000..38d7344c --- /dev/null +++ b/rsbuild/react-jest/.gitignore @@ -0,0 +1,13 @@ +# Local +.DS_Store +*.local +*.log* + +# Dist +node_modules +dist/ + +# IDE +.vscode/* +!.vscode/extensions.json +.idea diff --git a/rsbuild/react-jest/README.md b/rsbuild/react-jest/README.md new file mode 100644 index 00000000..37b1dd33 --- /dev/null +++ b/rsbuild/react-jest/README.md @@ -0,0 +1,29 @@ +# Rsbuild Project + +## Setup + +Install the dependencies: + +```bash +pnpm install +``` + +## Get Started + +Start the dev server: + +```bash +pnpm dev +``` + +Build the app for production: + +```bash +pnpm build +``` + +Preview the production build locally: + +```bash +pnpm preview +``` diff --git a/rsbuild/react-jest/jest-setup.ts b/rsbuild/react-jest/jest-setup.ts new file mode 100644 index 00000000..d0de870d --- /dev/null +++ b/rsbuild/react-jest/jest-setup.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom"; diff --git a/rsbuild/react-jest/jest.config.ts b/rsbuild/react-jest/jest.config.ts new file mode 100644 index 00000000..a8d473ba --- /dev/null +++ b/rsbuild/react-jest/jest.config.ts @@ -0,0 +1,28 @@ +export default { + testEnvironment: "jest-environment-jsdom", + setupFilesAfterEnv: ["/jest-setup.ts"], + transform: { + "^.+\\.(t|j)sx?$": [ + "@swc/jest", + { + jsc: { + parser: { + tsx: true, + syntax: "typescript", + }, + transform: { + react: { + runtime: "automatic", + }, + }, + }, + isModule: "unknown", + }, + ], + }, + moduleNameMapper: { + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": + "/tests/__mocks__/fileMock.js", + "\\.(css|less|scss|sass)$": "/tests/__mocks__/styleMock.js", + }, +}; diff --git a/rsbuild/react-jest/package.json b/rsbuild/react-jest/package.json new file mode 100644 index 00000000..77d27415 --- /dev/null +++ b/rsbuild/react-jest/package.json @@ -0,0 +1,30 @@ +{ + "name": "rsbuild-react-jest", + "private": true, + "version": "1.0.0", + "scripts": { + "dev": "rsbuild dev --open", + "build": "rsbuild build", + "preview": "rsbuild preview", + "test": "jest" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@rsbuild/core": "^0.4.15", + "@rsbuild/plugin-react": "^0.4.15", + "@swc/core": "^1.4.8", + "@swc/jest": "^0.2.36", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^14.2.1", + "@types/jest": "^29.5.12", + "@types/react": "^18.2.47", + "@types/react-dom": "^18.2.18", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "ts-node": "^10.9.2", + "typescript": "^5.4.2" + } +} \ No newline at end of file diff --git a/rsbuild/react-jest/rsbuild.config.ts b/rsbuild/react-jest/rsbuild.config.ts new file mode 100644 index 00000000..c9962d33 --- /dev/null +++ b/rsbuild/react-jest/rsbuild.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [pluginReact()], +}); diff --git a/rsbuild/react-jest/src/App.css b/rsbuild/react-jest/src/App.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/rsbuild/react-jest/src/App.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.content { + display: flex; + min-height: 100vh; + line-height: 1.1; + text-align: center; + flex-direction: column; + justify-content: center; +} + +.content h1 { + font-size: 3.6rem; + font-weight: 700; +} + +.content p { + font-size: 1.2rem; + font-weight: 400; + opacity: 0.5; +} diff --git a/rsbuild/react-jest/src/App.tsx b/rsbuild/react-jest/src/App.tsx new file mode 100644 index 00000000..dff17512 --- /dev/null +++ b/rsbuild/react-jest/src/App.tsx @@ -0,0 +1,12 @@ +import './App.css'; + +const App = () => { + return ( +
+

Rsbuild with React

+

Start building amazing things with Rsbuild.

+
+ ); +}; + +export default App; diff --git a/rsbuild/react-jest/src/env.d.ts b/rsbuild/react-jest/src/env.d.ts new file mode 100644 index 00000000..b0ac762b --- /dev/null +++ b/rsbuild/react-jest/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/rsbuild/react-jest/src/index.tsx b/rsbuild/react-jest/src/index.tsx new file mode 100644 index 00000000..2b875af7 --- /dev/null +++ b/rsbuild/react-jest/src/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render( + + + , +); diff --git a/rsbuild/react-jest/tests/App.spec.tsx b/rsbuild/react-jest/tests/App.spec.tsx new file mode 100644 index 00000000..caba45bd --- /dev/null +++ b/rsbuild/react-jest/tests/App.spec.tsx @@ -0,0 +1,8 @@ +import { render, screen } from "@testing-library/react"; +import App from "../src/App"; + +test("Renders the main page", () => { + const testMessage = "Rsbuild with React"; + render(); + expect(screen.getByText(testMessage)).toBeInTheDocument(); +}); diff --git a/rsbuild/react-jest/tests/__mocks__/fileMock.js b/rsbuild/react-jest/tests/__mocks__/fileMock.js new file mode 100644 index 00000000..0a445d06 --- /dev/null +++ b/rsbuild/react-jest/tests/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = "test-file-stub"; diff --git a/rsbuild/react-jest/tests/__mocks__/styleMock.js b/rsbuild/react-jest/tests/__mocks__/styleMock.js new file mode 100644 index 00000000..f053ebf7 --- /dev/null +++ b/rsbuild/react-jest/tests/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/rsbuild/react-jest/tests/tsconfig.json b/rsbuild/react-jest/tests/tsconfig.json new file mode 100644 index 00000000..ffb548ab --- /dev/null +++ b/rsbuild/react-jest/tests/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "types": ["@testing-library/jest-dom"] + }, + "include": ["./"] +} diff --git a/rsbuild/react-jest/tsconfig.json b/rsbuild/react-jest/tsconfig.json new file mode 100644 index 00000000..903def08 --- /dev/null +++ b/rsbuild/react-jest/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["DOM", "ES2020"], + "module": "ESNext", + "jsx": "react-jsx", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true + }, + "include": ["src"] +}