@modern-js/main-doc 0.0.0-nightly-20240903170747 → 0.0.0-nightly-20240904170727

package/docs/en/components/init-app.mdx

@@ -4,7 +4,6 @@
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
-? Please select the bundler: webpack
 ```
 
 After create the project, Modern.js will automatically install dependencies and create a git repository.

package/docs/en/components/init-rspack-app.mdx

@@ -3,5 +3,4 @@ $ npx @modern-js/create@latest myapp
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
-? Please select the bundler: Rspack
 ```

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -23,7 +23,7 @@ Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/
 
 Before using `tools.tailwindcss`, you need to enable the Tailwind CSS plugin for Modern.js.
 
-Please refer to the section [Using Tailwind CSS](/guides/basic-features/css.html#using-tailwind-css) for instructions on how to enable it.
+Please refer to the section [Using Tailwind CSS](/guides/basic-features/css/tailwindcss) for instructions on how to enable it.
 
 ### Function Type
 

package/docs/en/guides/advanced-features/_meta.json

@@ -14,6 +14,5 @@
   "build-performance",
   "inline-assets",
   "optimize-bundle",
-  "using-storybook",
   "web-server"
 ]

package/docs/en/guides/advanced-features/rsbuild-plugin.mdx

@@ -41,8 +41,8 @@ Here are the official Rsbuild plugins built into Modern.js:
 | [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                 | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
 | [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                                      | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/json-files.html#toml-file)                                                                         |
-| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/json-files.html#yaml-file)                                                                         |
+| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/static-assets/json-files.html#toml-file)                                                                         |
+| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/static-assets/json-files.html#yaml-file)                                                                         |
 
 ### Un-builtin Plugins
 

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -14,7 +14,7 @@ This document will show you how to enable Rspack build mode in Modern.js.
 
 ## Initializing an Rspack project
 
-The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an Rspack project, simply select the **Rspack** build tool by running:
+The Modern.js new project has enabled Rspack by default. Just execute [Initialize Project](/guides/get-started/quick-start.html#initialize) to create an Rspack project:
 
 import InitRspackApp from '@site-docs-en/components/init-rspack-app';
 
@@ -24,7 +24,7 @@ After the project is created, you can experience the project by running `pnpm ru
 
 ## Enable Rspack build
 
-Since Modern.js MAJOR_VERSION.46.0, you can enable Rspack build by add the following configuration in `modern.config.ts`:
+Since Modern.js MAJOR_VERSION.59.0, you can enable Rspack build by add the following configuration in `modern.config.ts`:
 
 ```diff title=modern.config.ts
 import { appTools, defineConfig } from '@modern-js/app-tools';
@@ -32,14 +32,14 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   plugins: [
     appTools({
-+     bundler: 'experimental-rspack',
++     bundler: 'rspack',
     }),
   ],
 });
 ```
 
 :::tip
-If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
+If your current version is lower than MAJOR_VERSION.59.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
 import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
@@ -70,12 +70,6 @@ export default {
 };
 ```
 
-:::tip
-After using Rspack for build, there are currently a few configs that are not supported in Rspack, such as [source.moduleScopes](/configure/app/source/module-scopes).
-
-For unsupported configurations, we have marked `Bundler: only support webpack` or `Bundler: only support Rspack` in the document. Please refer to the specific configuration introduction.
-:::
-
 ## Modify transpile configuration
 
 Modern.js uses Rspack [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) for code translation in Rspack mode.

package/docs/en/guides/basic-features/_meta.json

@@ -12,17 +12,33 @@
     "label": "rendering",
     "collapsed": true
   },
-  "css",
+  {
+    "type": "dir",
+    "name": "css",
+    "label": "css-solution",
+    "collapsed": true
+  },
+  "html",
+  {
+    "type": "dir",
+    "name": "static-assets",
+    "label": "static-assets",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "debug",
+    "label": "debug",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "testing",
+    "label": "testing",
+    "collapsed": true
+  },
   "alias",
-  "mock",
-  "proxy",
   "env-vars",
-  "html",
   "output-files",
-  "static-assets",
-  "svg-assets",
-  "json-files",
-  "wasm-assets",
-  "css-modules",
   "deploy"
 ]

package/docs/en/guides/basic-features/css/_meta.json

@@ -0,0 +1 @@
+["css", "css-modules", "css-in-js", "tailwindcss"]

package/docs/en/guides/basic-features/css/css-in-js.mdx

@@ -0,0 +1,34 @@
+# Using CSS-in-JS
+
+CSS-in-JS is a technique that allows you to write CSS styles in JS files.
+
+Modern.js integrates the popular CSS-in-JS implementation library [styled-components](https://styled-components.com/), which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles. You can directly import the API of [styled-components](https://styled-components.com/) from `@modern-js/runtime/styled` for use.
+
+When you need to write a `div` component with an internal font color of red, you can implement it as follows:
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const RedDiv = styled.div`
+  color: red;
+`;
+```
+
+If you need to dynamically set component styles based on the component's `props`, for example, the `primary` property of `props` is `true`, the button color is white, otherwise it is red, you can implement the code as follows:
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const Button = styled.button`
+  color: ${props => (props.primary ? 'white' : 'red')};
+  font-size: 1em;
+`;
+```
+
+For more usage of styled-components, please refer to [styled-components official website](https://styled-components.com/).
+
+Modern.js integrates Babel's [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) plugin internally, and you can configure the plugin through [tools.styledComponents](/configure/app/tools/styled-components).
+
+:::tip
+If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.npmjs.com/package/styled-jsx) and [Emotion](https://emotion.sh/), you need to install the corresponding dependencies first. For specific usage, please refer to the library's official website.
+:::

package/docs/en/guides/basic-features/{css-modules.mdx → css/css-modules.mdx}

@@ -1,7 +1,3 @@
----
-sidebar_position: 14
----
-
 # Use CSS Modules
 
 [CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts.

package/docs/en/guides/basic-features/css/css.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 1
+---
+
+# Styling
+
+Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
+
+## Using Less, Sass and Stylus
+
+Modern.js has built-in popular community CSS preprocessors, including Less and Sass.
+
+By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
+
+You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus).
+
+## Using PostCSS
+
+Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
+
+Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
+
+## Using Uno CSS
+
+Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage.

package/docs/en/guides/basic-features/{css.mdx → css/tailwindcss.mdx}

@@ -1,65 +1,4 @@
----
-sidebar_position: 1
----
-
-# Styling
-
-Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
-
-## Using Less, Sass and Stylus
-
-Modern.js has built-in popular community CSS preprocessors, including Less and Sass.
-
-By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
-
-You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus).
-
-## Using PostCSS
-
-Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
-
-Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
-
-## Using CSS Modules
-
-Please read the [Using CSS Modules](/guides/basic-features/css-modules) section to learn about the complete usage of CSS Modules.
-
-## Using CSS-in-JS
-
-CSS-in-JS is a technique that allows you to write CSS styles in JS files.
-
-Modern.js integrates the popular CSS-in-JS implementation library [styled-components](https://styled-components.com/), which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles. You can directly import the API of [styled-components](https://styled-components.com/) from `@modern-js/runtime/styled` for use.
-
-When you need to write a `div` component with an internal font color of red, you can implement it as follows:
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const RedDiv = styled.div`
-  color: red;
-`;
-```
-
-If you need to dynamically set component styles based on the component's `props`, for example, the `primary` property of `props` is `true`, the button color is white, otherwise it is red, you can implement the code as follows:
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const Button = styled.button`
-  color: ${props => (props.primary ? 'white' : 'red')};
-  font-size: 1em;
-`;
-```
-
-For more usage of styled-components, please refer to [styled-components official website](https://styled-components.com/).
-
-Modern.js integrates Babel's [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) plugin internally, and you can configure the plugin through [tools.styledComponents](/configure/app/tools/styled-components).
-
-:::tip
-If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.npmjs.com/package/styled-jsx) and [Emotion](https://emotion.sh/), you need to install the corresponding dependencies first. For specific usage, please refer to the library's official website.
-:::
-
-## Using Tailwind CSS
+# Using Tailwind CSS
 
 [Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
@@ -112,7 +51,7 @@ const Hello = () => (
 );
 ```
 
-### Configuring Tailwind CSS
+## Configuring Tailwind CSS
 
 In Modern.js, you have two ways to configure Tailwind CSS:
 
@@ -144,7 +83,7 @@ export default {
 
 If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
 
-### Tailwind CSS Autocomplete
+## Tailwind CSS Autocomplete
 
 Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
 
@@ -153,7 +92,7 @@ You can follow the steps below to enable the autocomplete feature:
 1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
 2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
 
-### Tailwind CSS Version
+## Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
 
@@ -162,7 +101,7 @@ If your project is still using Tailwind CSS v2, we recommend that you upgrade to
 - [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
 - [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
 
-### Browser Compatibility
+## Browser Compatibility
 
 Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:
 

package/docs/en/guides/basic-features/data/data-fetch.mdx

@@ -425,4 +425,4 @@ export const loader = async (): Promise<ProfileData> => {
 
 In CSR projects, the `loader` executes on the client side and can directly call BFF functions to make API requests.
 
-In SSR projects, each `loader` is also a server-side API. We recommend using `loader` instead of BFF functions with an HTTP method of `get` to avoid an extra layer of forwarding and execution.
+In SSR projects, each `loader` is also a server-side API. We recommend using `loader` instead of BFF functions with an HTTP method of `get` to avoid an extra layer of forwarding and execution.

package/docs/en/guides/basic-features/data/data-write.mdx

@@ -96,7 +96,7 @@ export const action = async ({ params }: ActionFunctionArgs) => {
 
 ### request
 
-`request` is an instance of [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request). 
+`request` is an instance of [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request).
 
 Using `request`, you can retrieve data submitted from the client in the action function, such as `request.json()`, `request.formData()`, `request.json()`, etc. Refer to [Data Types](#data-types) for which API to use.
 

package/docs/en/guides/basic-features/debug/_meta.json

@@ -0,0 +1 @@
+["mock", "proxy", "rsdoctor", "using-storybook"]

package/docs/en/guides/basic-features/debug/rsdoctor.mdx

@@ -0,0 +1,57 @@
+import { PackageManagerTabs } from '@theme';
+
+# Using Rsdoctor
+
+Rsdoctor is a build analysis tool that supports both Webpack and Rspack. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.
+
+## Install Dependencies
+
+Depending on whether your project uses Rspack or Webpack, choose the corresponding plugin installation.
+
+### Rspack Plugin
+
+<PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />
+
+### Webpack Plugin
+
+<PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />
+
+## Register Plugin
+
+In `modern.config.ts`, you can register the Rspack or Webpack plugin via `tools.bundlerChain`. Refer to the example below:
+
+```ts title="modern.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // Only register the plugin when RSDOCTOR is true, as the plugin will increase build time.
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // Plugin options
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+:::note
+The above code is an example of using Rspack. If you are using Webpack, please switch the plugin accordingly.
+:::
+
+## Execute Build
+
+You can execute the build command within your project. After the build is complete, Rsdoctor will automatically open the analysis page for the build.
+
+```bash
+RSDOCTOR=true npm run build
+```
+
+## Related Documentation
+
+For more information, please refer to the [Rsdoctor Website](https://rsdoctor.dev/).

package/docs/en/guides/{advanced-features → basic-features/debug}/using-storybook.mdx

@@ -228,3 +228,5 @@ export default config;
 The default config file path is `modern.config.(j|t)s`, for the detail config, see [modern.js config](/configure/app/usage).
 
 If the original project includes configurations for Babel, they need to be written in the modern configuration. Most Babel configurations have already been included in Modern.js.
+
+After installation, make the corresponding [configuration](/guides/basic-features/debug/using-storybook#configurations).

package/docs/en/guides/basic-features/static-assets/_meta.json

@@ -0,0 +1 @@
+["json-files", "svg-assets", "wasm-assets"]

package/docs/en/guides/basic-features/static-assets.mdx

@@ -21,7 +21,7 @@ The following are the formats supported by Modern.js by default:
 If you need to import assets in other formats, please refer to [Extend Asset Types](#extend-asset-types).
 
 :::tip SVG images
-SVG image is a special case. Modern.js support convert SVG to React components, so SVG is processed separately. For details, see [Import SVG Assets](/guides/basic-features/svg-assets.html).
+SVG image is a special case. Modern.js support convert SVG to React components, so SVG is processed separately. For details, see [Import SVG Assets](/guides/basic-features/static-assets/svg-assets.html).
 :::
 
 ## Import Assets in JS file

package/docs/en/guides/basic-features/testing/_meta.json

@@ -0,0 +1 @@
+["playwright", "vitest", "jest", "cypress"]

package/docs/en/guides/basic-features/testing/cypress.mdx

@@ -0,0 +1,95 @@
+# Cypress
+
+Cypress is a framework for E2E testing and component testing.
+
+To use Cypress in Modern.js, you need to install the dependencies first. You can run the following commands:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command={{ npm: "npm install -D cypress", yarn: "yarn add -D cypress", pnpm: "pnpm install -D cypress" }} />
+
+Next, create a `cypress.config.ts` file and add the following content:
+
+```ts
+import { defineConfig } from 'cypress'
+ 
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+  },
+})
+```
+
+## Writing Test Cases
+
+Now, use Cypress to write an E2E test case by first creating two Modern.js pages.
+
+```tsx title="routes/page.tsx"
+import { Link } from '@modern-js/runtime/router';
+
+const Index = () => (
+  <div>
+    <h1>Home</h1>
+    <Link to="/about">About</Link>
+  </div>
+);
+
+export default Index;
+```
+
+```tsx title="routes/about/page.tsx"
+import { Link } from '@modern-js/runtime/router';
+
+const Index = () => (
+  <div>
+    <h1>About</h1>
+    <Link to="/">Home</Link>
+  </div>
+);
+
+export default Index;
+```
+
+Next, create the test case file:
+
+```ts title="cypress/e2e/app.cy.ts"
+describe('Navigation', () => {
+  it('should navigate to the about page', () => {
+    // Start from the index page
+    cy.visit('http://localhost:8080/')
+ 
+    // Find a link with an href attribute containing "about" and click it
+    cy.get('a[href*="about"]').click()
+ 
+    // The new url should include "/about"
+    cy.url().should('include', '/about')
+ 
+    // The new page should contain an h1 with "About"
+    cy.get('h1').contains('About')
+  })
+})
+```
+
+The test file may lack type definitions for the API. You can refer to the [Cypress - Typescript](https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson) documentation to resolve this.
+
+You can add the command to your `package.json`:
+
+```json title="package.json"
+{
+  "scripts": {
+    "test": "cypress open"
+  }
+}
+```
+
+## Run Test Cases
+
+Execute the above `test` command to run the test cases:
+
+```bash
+DevTools listening on ws://127.0.0.1:55203/devtools/browser/xxxxx
+```
+
+Cypress will open a headless browser. Following the prompts, you can find the corresponding test files and automatically run the E2E tests:
+
+![cypress](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/cypress.jpg)

package/docs/en/guides/basic-features/testing/jest.mdx

@@ -0,0 +1,148 @@
+# Jest
+
+Jest is a JavaScript testing framework that is primarily used with React Testing Library for unit testing and Snapshot testing.
+
+To use Jest in Modern.js, you need to install the dependencies first. You can run the following commands:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command={{ 
+  npm: "npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom", 
+  yarn: "yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom", 
+  pnpm: "pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom"
+}} />
+
+Next, you can run the following commands to automatically initialize Jest in your project and generate a basic `jest.config.[jt]s` configuration:
+
+<PackageManagerTabs command={{ 
+  npm: "npm init jest@latest", 
+  yarn: "yarn create jest@latest", 
+  pnpm: "pnpm create jest@latest"
+}} />
+
+## Configuration File
+
+:::note
+This section will use `.ts` files for Jest testing.
+:::
+
+Compared to other testing frameworks, Jest requires more configuration at the build level, such as handling JSX and ESM syntax. Therefore, you need to install some additional dependencies:
+
+<PackageManagerTabs command={{ 
+  npm: "npm install -D babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript", 
+  yarn: "yarn add -D babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript", 
+  pnpm: "pnpm install -D babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript"
+}} />
+
+### Configure Jest
+
+You need to further configure the `jest.config.ts` file to allow Jest to correctly compile and run test cases. Here is a basic configuration:
+
+```ts title="jest.config.ts"
+import type { Config } from 'jest';
+
+const config: Config = {
+  coverageProvider: 'babel',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  transformIgnorePatterns: [],
+};
+
+export default config;
+```
+
+In the configuration, the `transformIgnorePatterns` is set to an empty array, meaning that all files will be compiled. If you want to speed up the test run, you can configure it as needed.
+
+The `setupFilesAfterEnv` will be executed at startup. In `jest.setup.ts`, you can import `@testing-library/jest-dom`, which includes a set of convenient custom matchers, such as `.toBeInTheDocument()`, to make writing tests easier:
+
+```ts title="jest.setup.ts"
+import '@testing-library/jest-dom';
+```
+
+### Configure Babel
+
+You need to configure Babel to allow Jest to automatically compile JSX and other syntax. Here is a basic configuration:
+
+```js title="babel.config.js"
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};
+```
+
+## Writing Test Cases
+
+Now, you can start writing tests. First, add a `test` command in `package.json`:
+
+```json title="package.json"
+{
+  "scripts": {
+    "test": "jest"
+  }
+}
+```
+
+Create a simple page for testing:
+
+```tsx title="routes/page.tsx"
+import { Link } from '@modern-js/runtime/router';
+
+const Index = () => (
+  <div>
+    <h1>Home</h1>
+    <Link to="/about">About</Link>
+  </div>
+);
+
+export default Index;
+```
+
+Add a test case to check if the page has the expected text:
+
+```tsx title="__tests__/page.test.tsx"
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from '@modern-js/runtime/router';
+import Page from '../routes/page';
+
+describe('Page', () => {
+  it('renders a heading', () => {
+    render(
+      <Router>
+        <Page />
+      </Router>,
+    );
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+});
+```
+
+In the above test case, we imported the `<Router>` component from `@modern-js/runtime/router` because React Router requires the corresponding context when rendering some route-related components.
+
+:::note
+When running directly in the Modern.js application, the `<Router>` component will be automatically injected.
+:::
+
+## Run Test Cases
+
+Execute the above `test` command to run the test cases:
+
+```bash
+ PASS  src/__tests__/page.test.tsx
+  Page
+    ✓ renders a heading (31 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       1 passed, 1 total
+Snapshots:   0 total
+Time:        0.959 s, estimated 1 s
+```