Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces comprehensive React testing documentation and example projects, covering both Node-based and browser-based React testing with Rstest, and adds concrete React example setups (including Rsbuild integration and SSR) to the repo.
Changes:
- Add English and Chinese “React” framework guides describing Node testing, SSR testing, and Browser Mode testing with Rstest, including adapter-Rsbuild usage.
- Introduce new
examples/reactproject showcasing happy-dom-based component, hook, and SSR tests using multi-project Rstest config, and update its dependencies/scripts. - Add a new
examples/react-rsbuildproject demonstrating how to reuse an existing Rsbuild config with@rstest/adapter-rsbuild, along with corresponding TS configs, tests, and build setup; and update licensing/docs metadata accordingly.
Reviewed changes
Copilot reviewed 31 out of 34 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| website/docs/en/guide/framework/react.mdx | New English guide for testing React apps/components with Rstest (Node, SSR, Browser Mode, Rsbuild adapter), aligning with new examples and cross-linking to browser testing docs. |
| website/docs/zh/guide/framework/react.mdx | Chinese translation of the React testing guide, kept in sync with the English version and linking to the same examples and framework guides. |
| website/docs/en/guide/framework/_meta.json | Registers the new react guide under the framework section in the English docs sidebar. |
| website/docs/zh/guide/framework/_meta.json | Registers the new react guide under the 框架 section in the Chinese docs sidebar. |
| website/docs/en/guide/_meta.json | Adds the framework directory section header to the English guide navigation to surface framework-specific guides like React. |
| website/docs/zh/guide/_meta.json | Adds the framework directory section header to the Chinese guide navigation. |
| examples/react/src/App.tsx | Simplifies the example React app to accept an optional greeting prop (defaulting to “Hello World”) and updates copy to reference React instead of Rsbuild. |
| examples/react/src/App.server.tsx | New SSR helper that renders <App> to a string via ReactDOMServer.renderToString, taking optional greeting props. |
| examples/react/src/Counter.tsx | New simple Counter component with stateful count, initialCount prop, and a button to increment the count, used by the tests. |
| examples/react/src/useCounter.ts | New custom useCounter hook with increment, decrement, and reset APIs, used to demonstrate hook testing. |
| examples/react/src/App.css | Shared styling for the React example app (layout, typography) reused by both client and SSR rendering. |
| examples/react/src/index.tsx | Client entry for the React example app creating a React 18+ root and rendering <App /> into #root. |
| examples/react/test/App.test.tsx | Updates client-side tests to assert default and custom greetings for <App>, aligned with the new props-based API. |
| examples/react/test/App.server.test.tsx | New SSR tests verifying the HTML output of renderToString, including default and custom greetings and basic HTML structure checks. |
| examples/react/test/Counter.test.tsx | New tests for the Counter component covering default/custom initial count and click-driven increments. |
| examples/react/test/useCounter.test.ts | New tests for the useCounter hook covering initialization, increment, decrement, and reset behavior via renderHook and act. |
| examples/react/test/rstest.setup.ts | New test setup file for the React example that extends expect with jest-dom matchers and runs cleanup() after each test. |
| examples/react/test/tsconfig.json | Test-specific TS config extending the app’s tsconfig and registering @testing-library/jest-dom types. |
| examples/react/rstest.client.config.ts | New Rstest project config for client-side React tests using pluginReact, testEnvironment: 'happy-dom', and DOM-oriented setup. |
| examples/react/rstest.server.config.ts | New Rstest project config for SSR tests using pluginReact, testEnvironment: 'node', and the same setup file as client tests (notably problematic due to DOM cleanup in a node environment). |
| examples/react/rstest.config.ts | Top-level config that composes the client and server Rstest projects via the projects field. |
| examples/react/rstest.setup.ts | Old root-level jest-dom setup removed in favor of the new test/rstest.setup.ts, centralizing test setup under the test directory. |
| examples/react/package.json | Updates the React example to be ESM ("type": "module"), wire up rstest scripts (including project-specific ones), and depend on @rstest/core instead of the Rsbuild adapter, with proper React/testing devDependencies. |
| examples/react/rsbuild.config.ts | Existing Rsbuild config for the React example app using pluginReact (left unchanged in structure, now supporting the new app code). |
| examples/react-rsbuild/src/App.tsx | React+Rsbuild example app mirroring the original “Rsbuild with React” example used with Rsbuild adapter-based testing. |
| examples/react-rsbuild/src/module.ts | Simple h2Title helper returning 'example' for use in the Rsbuild React example. |
| examples/react-rsbuild/src/index.tsx | Rsbuild app entry creating a React root and rendering <App /> into #root. |
| examples/react-rsbuild/src/App.css | Styling for the Rsbuild React example (same design as other examples). |
| examples/react-rsbuild/src/env.d.ts | Declares @rsbuild/core/types for TypeScript awareness of Rsbuild-provided globals. |
| examples/react-rsbuild/test/App.test.tsx | Example test showing rs.mock with a mocked module and verifying <App> renders the expected headings, running via Rsbuild adapter. |
| examples/react-rsbuild/test/rstest.setup.ts | Jest-dom setup with afterEach(cleanup) for the Rsbuild React example tests. |
| examples/react-rsbuild/test/tsconfig.json | Test TS config for the Rsbuild example, extending the app tsconfig and enabling jest-dom typings. |
| examples/react-rsbuild/rsbuild.config.ts | Rsbuild config for the Rsbuild React example with pluginReact set up. |
| examples/react-rsbuild/rstest.config.ts | Rstest config for the Rsbuild React example extending Rsbuild via withRsbuildConfig and applying the shared jest-dom setup file. |
| examples/react-rsbuild/package.json | New package manifest for the Rsbuild React example with rsbuild/rstest scripts and appropriate React/testing devDependencies. |
| website/docs/en/guide/browser-testing/framework-guides.mdx (referenced) | Already-existing doc now referenced by the new React guide for Browser Mode React testing. |
| website/docs/zh/guide/browser-testing/framework-guides.mdx (referenced) | Chinese counterpart referenced by the new Chinese React guide. |
| pnpm-lock.yaml | Adds lockfile entries for the new examples/react and examples/react-rsbuild projects and their React/testing dependencies. |
| packages/core/LICENSE.md | Removes the previously included MIT license block for the yn package, while the core package still uses yn in its code and devDependencies. |
| packages/core/package.json | Confirms yn remains a dependency (devDependency) of @rstest/core, making its license removal from LICENSE.md significant. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying rstest with
|
| Latest commit: |
6f66450
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2f062395.rstest.pages.dev |
| Branch Preview URL: | https://react-guide.rstest.pages.dev |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Introduce how to test React applications and components with Rstest.
Related Links
Checklist