@modern-js/main-doc 2.1.0 → 2.2.0

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/eslint.md

@@ -1,144 +0,0 @@
----
-title: ESLint
-sidebar_position: 8
----
-
-**Modern.js ESLint Rules** Is the full set of **ESLint** rules，includes `@modern-js` （Lint rules for Node.js projects）and `@modern-js-app`（Lint rules for web projects）。
-
-More ESLint usage is described below with specific questions.
-
-## Q: How To Deal With Lint
-
-### Automatic Fix
-
-Most problems will be solved by the automatic fix of ESLint rules or the code formatting of [Prettier](https://prettier.io/) (which has been integrated into ESLint), and the developer does not need to care about the details of the problem and how to solve it.
-
-:::info
-This kind of automatic fix is mainly performed when the IDE saves the file, and a few will be automatically fix on submit.
-:::
-
-### Batch Automatic Fix
-
-在少数情况下，比如旧项目迁移的时候，可以执行以下命令，批量修复和检查所有文件：
-
-```bash
-pnpm run lint:error
-```
-
-### Manual Fix
-
-对于无法自动修复的问题，可以在 IDE 里点击问题提示框里的规则链接，打开这条规则的文档，查看问题的解释和解决方案。
-
-### 声明例外情况
-
-目前阶段，有些规则并不能做到足够智能，多数情况下会有很大收益，在少数情况下也许不适用。但如果为了这些少数情况就把整个规则关掉或改掉，得不偿失。
-
-这种情况下可以用 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 注释，对符合**少数情况**的代码块做标注，声明这里是一个例外，应该忽略。比如：
-
-```js
-/* eslint-disable filenames/match-exported */
-...
-/* eslint-enable filenames/match-exported */
-```
-
-:::info 注
-在 VS Code 编辑器里输入 eslint，会自动出现关于 "eslint-disable" 的提示框，选择提示选项生成对应注释对。
-:::
-
-【Modern.js ESLint 规则集】要求 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 必须成对使用，必须明确表达要影响的范围，以及在这个范围内明确表达要禁用什么规则，目的是让**例外**有明确的、最小化的范围，避免 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 被滥用，导致不属于例外的代码也被禁用了规则。
-
-## Q: 如何自定义 ESLint 规则
-
-### 仓库根目录下 `package.json` 里的 "eslintConfig" 字段
-
-这个地方是整个仓库的默认 ESLint 配置，是针对纯 Node.js 代码（只能在 Node.js 里运行）设计的。
-
-如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置。该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
-
-```json
- "eslintConfig": {
-    "extends": [
-      "@modern-js"
-    ],
-    "rules": {
-      "filenames/match-exported": "off"
-    }
-  },
-
-```
-
-### `src/.eslintrc.js` 文件
-
-Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
-
-:::info 注
-Universal JS 代码是既能浏览器端也能在服务器端运行的代码。
-:::
-
-如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置，该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
-
-```js
-// eslint-disable-next-line import/no-commonjs
-module.exports = {
-  root: true,
-  extends: ['@modern-js-app'],
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ['../tsconfig.json'],
-  },
-  rules: {
-    'filenames/match-exported': 'off',
-  },
-};
-```
-
-如果有需要，还可以继续在不同的子目录里增加 `.eslintrc.js` 文件，针对这个子目录里的代码做特殊配置：
-
-```js
-module.exports = {
-  rules: {
-    'filenames/match-exported': 'off',
-  },
-};
-```
-
-:::tip 提示
-注意：没有必要使用 `extends` 字段，会自动继承父目录的配置。
-:::
-
-### package.json 里的 `eslintIgnore` 字段
-
-把包含 `.js`、`.jsx`、`.ts`、`.tsx` 文件、但不需要做代码检查和自动修复的目录，添加到 `eslintIgnore` 里，可以优化 ESLint 检查的速度，比如：
-
-```json
- "eslintIgnore": [
-    "node_modules",
-    "dist",
-    "output"
-  ],
-```
-
-## Q: 如何升级 ESLint 插件的版本
-
-只要不是 Major 版本的变化（不符合 [Semver](https://semver.org/) 规则的 `^` 符号），就可以直接在业务项目的 `package.json` 里指定这个依赖，删除 Lock 文件（或尝试手动删除 Lock 文件中这个包名的内容），执行 `pnpm install` 重新安装依赖并且生成新的 Lock 文件。
-
-做完这些操作之后，在业务项目的 `./node_modules` 目录里，这个插件应该只存在一份，并且升级到了你指定的版本。
-
-:::tip 提示
-- Major 版本就是主版本号。更多信息，请阅读【[Semantic Versioning](https://semver.org/#summary)】。
-- 所有被 Modern.js 封装的上游项目（比如 ESLint、[ESLint 插件](https://eslint.org/docs/user-guide/configuring/plugins#plugins)、[React Router](https://reactrouter.com/) 等），也都可以这样升级。
-- Modern.js 也会在每次发版中尽量及时的升级这些上游依赖。
-- Major 版本的升级需要由 Modern.js 来发版。
-:::
-
-## Q: WebStorm 有时候会报 ESLint 错误
-
-由于 WebStorm 认为 ESLint 执行目录是根据 `.eslintrc` 文件来决定的。因此 `src/.eslintrc` 文件位置的放置会导致 `tsconfig.json` 文件指定的位置（项目根目录下）在 `src/` 目录下找不到。
-
-此时需要手动配置一下：
-
-```json
---parser-options=project:../tsconfig.json
-```
-
-![webstorm-lint-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/webstorm-lint-error.png)

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/low-level.md

@@ -1,44 +0,0 @@
----
-title: Low-Level Tools
-sidebar_position: 11
----
-
-## Usage
-
-Modern.js internally integrates tools such as [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Webpack](https://webpack.js.org/), [PostCSS](https://postcss.org/), [Tailwind CSS] (https://tailwindcss.com/) by default.
-
-Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.
-
-Take configuring Webpack as an example, just add ['tools.webpack'] (/docs/configure/app/tools/webpack) to the modern.config.ts:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    webpack: config => {},
-  },
-});
-```
-
-Configurations in the `tools` can be set to `Object` or `Function`.
-
-When the value is `Object`, it will be merged with the default configuration. For the specific merging strategy, refer to the configuration options document (see table below).
-
-When the value is `Function`, the first parameter is the default configuration value. You can directly modify this object without returning it, or you can return a new object or a merged object as the final result.
-
-## Low-level Configuration Details
-
-Currently provided is as follows:
-
-| Tools             | Config                                                                |
-| ----------------- | --------------------------------------------------------------------- |
-| DevServer         | [tools.devServer](/docs/configure/app/tools/dev-server)               |
-| Babel             | [tools.babel](/docs/configure/app/tools/babel)                        |
-| styled-components | [tools.styledComponents](/docs/configure/app/tools/styled-components) |
-| PostCSS           | [tools.postcss](/docs/configure/app/tools/postcss)                    |
-| Less              | [tools.less](/docs/configure/app/tools/less)                          |
-| Sass              | [tools.sass](/docs/configure/app/tools/sass)                          |
-| webpack           | [tools.webpack](/docs/configure/app/tools/webpack)                    |
-| Minify CSS        | [tools.minifyCss](/docs/configure/app/tools/minify-css)               |
-| terser            | [tools.terser](/docs/configure/app/tools/terser)                      |
-| Tailwind CSS      | [tools.tailwind](/docs/configure/app/tools/tailwindcss)               |
-| Autoprefixer      | [tools.autoprefixer](/docs/configure/app/tools/autoprefixer)          |

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/ssg.md

@@ -1,130 +0,0 @@
----
-title: Static Site Generation
-sidebar_position: 4
----
-
-Static Site Generation is a solution for rendering complete static web pages at build time based on data and templates.
-
-First need to execute `pnpm run new` to enable the SSG features:
-
-```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「SSG」功能
-```
-
-After execute script，register SSG plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import ssgPlugin from '@modern-js/plugin-ssg';
-
-// https://modernjs.dev/docs/apis/app/config
-export default defineConfig({
-  output: {
-    ssg: true,
-  },
-  plugins: [..., ssgPlugin()],
-});
-```
-
-SSG in **Conventional Routing** and **Self-controlled Routing** has different usage.
-
-### Conventional Routing
-
-Modern.js generate routes based on the file structure under the entry, so the framework can collect complete routing information.
-
-For example, the following is a project directory structure using conventional routing:
-
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
-
-The above file directory will generate the following three routes:
-
-- `/`
-- `/user`
-- `/user/profile`
-
-:::note
-If you don't know the rules for routing, you can first check [routes](/docs/guides/basic-features/routes).
-:::
-
-add component to `src/routes/page.tsx`：
-
-```jsx title="src/routes/page.tsx"
-export default () => {
-  return <div>Index Page</div>;
-};
-```
-
-SSG is also render in Node.js. So we can enable SSR in developmenet env, expose code problems in advance and verify SSG rendering effect：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  server: {
-    ssr: process.env.NODE_ENV === 'development',
-  }
-}
-```
-
-Execute the `pnpm run dev` command in the project to view the `dist/` directory, and only generate an HTML file `main/index.html`.
-
-Execute the `pnpm run build` command in the root path of the project. After the construction is completed, view the `dist/` directory, and generate `main/index.html`, `main/user/index.html` and `main/user/profile/index.html` three HTML files, the content corresponds to the above three routes.
-
-Using **Conventional Routing**, each route will generate a HTML file. Looking at the `main/index.html`, we can find the text content containing the `Index Page`, which is exactly the effect of SSG.
-
-After executing `pnpm run serve` to start the project, visit the page in the Network, view the document returned by the request. The document contains the complete page content rendered by the component.
-
-### Self-controlled Routing
-
-**Self-controlled routing** is a custom routing through component code, which requires the application to run to obtain accurate routing information. Therefore, the SSG function cannot be used out of the box. At this time, the user needs to inform the Modern.js framework in advance which routes need to enable the SSG.
-
-For example, there is the following code, which contains multiple routes. When setting `output.ssg` to `true`, only the entry route '/' will be rendered by default:
-
-```tsx title="src/App.tsx"
-import { useRuntimeContext } from '@modern-js/runtime';
-import { Routes, Route, BrowserRouter } from '@modern-js/runtime/router';
-import { StaticRouter } from '@modern-js/runtime/router/server';
-
-const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
-
-export default () => {
-  const { context } = useRuntimeContext();
-  return (
-    <Router location={context.request.pathname}>
-      <Routes>
-        <Route index element={<div>index</div>} />
-        <Route path="about" element={<div>about</div>} />
-      </Routes>
-    </Router>
-  );
-};
-```
-
-If we want to enable the SSG of `/about` at the same time, we can configure the `output.ssg` to tell Modern.js to enable the SSG of the specified route.
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  output: {
-    ssg: {
-      routes: ['/', '/about'],
-    },
-  },
-});
-```
-
-run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered。
-
-Looking at the bundle file, a new `main/about/index.html` file has been added in the `dist/` directory.
-
-:::info
-The above only introduces the single entry, more related content can be viewed [SSG API](/docs/configure/app/output/ssg)。
-:::

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/ssr.md

@@ -1,300 +0,0 @@
----
-title: Server-side rendering
-sidebar_position: 3
----
-
-In Modern.js, SSR also works out of the box. Developers do not need to write complex server level logic for SSR, nor do they need to care about the operation and maintenance of SSR, or create services. Modern.js have a comprehensive SSR degradation strategy to ensure that pages can run safely.
-
-Enabling SSR is very easy, just set ['server.ssr'](/docs/configure/app/server/ssr) to `true`:
-
-```json
-{
-  "server": {
-    "ssr": true
-  }
-}
-```
-
-## SSR Data Fetch
-
-Modern.js provides Data Loader, which is convenient for developers to fetch data under SSR and CSR. Each routing module, such as `layout.tsx` and `page.tsx`, can define its own Data Loader:
-
-```ts title="src/routes/page.tsx"
-export const loader = () => {
-  return {
-    message: 'Hello World',
-  };
-};
-```
-
-in the component, the data returned by the `loader` function can be get data through the Hooks API:
-
-```tsx
-export default () => {
-  const data = useLoaderData();
-  return <div>{data.message}</div>;
-};
-```
-
-Modern.js break the traditional SSR development model and provide users with a user-friendly SSR development experience.
-
-And it provides elegant degradation processing. Once the SSR request fails, it will automatically downgrade and restart the request on the browser side.
-
-However, developers still need to pay attention to the fallback of data, such as `null` values or data returns that do not as expect. Avoid React rendering errors or messy rendering results when SSR.
-
-:::info
-When using Data Loader, data fetching happens before rendering, Modern.js still supports fetching data when the component is rendered. See [Data Fetch](/docs/guides/basic-features/data-fetch)。
-:::
-
-## Keep Rendering Consistent
-
-In some businesses, it is usually necessary to display different UI displays according to the current operating container environment characteristics, such as [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) information.
-
-If the processing is not careful enough, the rendering results may do not meet the expectations at this time.
-
-Here is an example to show the problem when SSR and CSR rendering are inconsistent, add the following code to the component:
-
-```tsx
-{
-  typeof window !== 'undefined' ? <div>browser content</div> : null;
-}
-```
-
-After starting the app, visit the page and will find that the browser console throws a warning message:
-
-```sh
-Warning: Expected server HTML to contain a matching <div> in <div>.
-```
-
-This is caused by the inconsistency between the rendering result and the SSR rendering result when React executes the hydrate logic on the client side. Although the page performs normally, in complex applications, it is likely to cause problems such as DOM hierarchy confusion and style confusion.
-
-:::info
-For hydrate logic, please refer to [here](https://reactjs.org/docs/react-dom.html#hydrate).
-:::
-
-Applications need to maintain the consistency of SSR and CSR rendering results. If there are inconsistencies, it means that this part of the content does not need to be rendered in SSR.
-
-Modern.js provide [`<NoSSR>`](/docs/apis/app/runtime/core/use-runtime-context) for such content that does not need to be rendered in SSR:
-
-```ts
-import { NoSSR } from '@modern-js/runtime/ssr';
-```
-
-Outside of elements that do not require SSR, wrap with a `NoSSR` component:
-
-```tsx
-<NoSSR>
-  <div>client content</div>
-</NoSSR>
-```
-
-After modifying the code, refresh page found that the previous Waring disappeared. Open the Network window of the browser developer tool to see that the returned HTML document does not contain the content of the `NoSSR` component package.
-
-:::info
-['useRuntimeContext'](/docs/apis/app/runtime/core/use-runtime-context) can get complete request information, which can be used to ensure that the rendering results of SSR and CSR are consistent.
-:::
-
-## Concerned Memory Leaks
-
-:::warning
-In the SSR, developers need to pay special attention to the problem of memory leaks. Even small memory leaks can affect services..
-:::
-
-In SSR, every request triggers the component rendering. So, you need to avoid defining any potentially growing global data, or subscribing to events globally, or creating streams that will not be destroyed.
-
-For example, the following code, when using [redux-observable](https://redux-observable.js.org/), developers used to code like this:
-
-```tsx
-import { createEpicMiddleware, combineEpics } from 'redux-observable';
-
-const epicMiddleware = createEpicMiddleware();
-const rootEpic = combineEpics();
-
-export default function Test() {
-  epicMiddleware.run(rootEpic);
-  return <div>Hello Modern.js</div>;
-}
-```
-
-Create a Middleware instance `epicMiddleware` outside the component and call epicMiddleware.run inside the component.
-
-On the browser side, this code does not cause any problems. But in SSR, the Middleware instance will never be destroyed. Every time the component is rendered and `rootEpic` is called, new event bindings are added internally, causing the entire object to continue to grow larger, which ultimately affects application performance.
-
-Such problems in CSR are not easy to detect, so when switching from CSR to SSR, if you are not sure whether the application has such hidden dangers, you can press the application.
-
-## Crop SSR Data
-
-In order to keep the data requested in the SSR phase, it can be used directly on the browser side, Modern.js inject the data and state that collected during the rendering process into the HTML.
-
-As a result, CSR applications often have a large amount of interface data and the state of the components is not crop. If SSR is used directly, the rendered HTML size may be too large.
-
-At this time, SSR not only cannot bring an improvement in the user experience, but may have the opposite effect.
-
-Therefore, when using SSR, **developers need to do reasonable weight loss for the application**:
-
-1. Pay attention to the first screen, you can only request the data needed for the first screen in SSR, and render the rest on the browser side.
-2. Removes the data independent with render from the data returned by the interface.
-
-## Serverless Pre-render
-
-Modern.js provide Serverless Pre-rendering(SPR) to improve SSR performance.
-
-SPR uses pre-rendering and caching to provide the responsive performance of static Web for SSR pages. It allows SSR applications to have the responsiveness and stability of static Web pages, while keeping data dynamically updated.
-
-Using SPR in the Modern.js is very simple, just add the `<PreRender>` component, and the page where the component is located will automatically open SPR.
-
-This mock a component that uses the `useLoaderData` API, and the request in the Data Loader takes 2s.
-
-```jsx
-import { useLoaderData } from '@modern-js/runtime/router';
-
-export const loader = async () => {
-  await new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve(null);
-    }, 2000);
-  });
-
-  return {
-    message: 'Hello Modern.js',
-  };
-};
-
-export default () => {
-  const data = useLoaderData();
-  return <div>{data?.message}</div>;
-};
-```
-
-After executing the `dev` command and opening the page, it is obvious that the page needs to wait 2s before returning.
-
-The next is to use the `<PreRender>` component, which can be exported directly from `@modern-js/runtime/ssr `:
-
-```ts
-import { PreRender } from '@modern-js/runtime/ssr';
-```
-
-Use the `PreRender` component in the routing component and set the parameter `interval` to indicate that the expiration time of the rendering result is 5s:
-
-```tsx
-<PreRender interval={5} />
-```
-
-After modification, execute `pnpm run build && pnpm run serve` to start the application and open the page.
-
-When open page for the first time, it is no different from the previous rendering, and there is also a 2s delay.
-
-Refresh page, and the page opens instantly, but at this time, the page data has not changed due to the refresh, because the cache has not expired.
-
-Wait 5s, refresh the page again, the data of the page is still unchanged. Refresh the page again The data changes, but the page still responds almost instantaneously.
-
-This is because in the previous request, the SPR has asynchronously obtained the new rendering result in the background, and the page requested this time is the version that has been cached in the server.
-
-It is conceivable that when `interval` is set to 1, users can have the responsive experience of a static page.
-
-:::info
-For more detail, see [`<PreRender>`](/docs/apis/app/runtime/ssr/pre-render)。
-:::
-
-## Treeshaking
-
-When SSR is enabled, Modern.js will use the same entry to build both the SSR Bundle and the CSR Bundle. Therefore, the Web API in the SSR Bundle, or the Node API in the CSR Bundle, can lead to runtime errors.
-
-Web API into a component is usually to do some global listening, or to get browser-related data, such as:
-
-```tsx
-document.addEventListener('load', () => {
-  console.log('document load');
-});
-const App = () => {
-  return <div>Hello World</div>;
-};
-export default App;
-```
-
-The Node API is introduced in the component file, usually because of the use of Data Loader, for example:
-
-```ts
-import fse from 'fs-extra';
-export const loader = () => {
-  const file = fse.readFileSync('./myfile');
-  return {
-    ...
-  };
-};
-```
-
-### Use Environment Variables
-
-For the first case, we can directly use Modern.js built-in environment variables `MODERN_TARGET` to remove useless code at build time:
-
-```ts
-if (process.env.MODERN_TARGET === 'browser') {
-  document.addEventListener('load', () => {
-    console.log('document load');
-  });
-}
-```
-
-:::note
-For more information, see [environment variables](/docs/guides/basic-features/env-vars).
-:::
-
-### Use File Suffix
-
-In the second case, the Treeshaking method does not guarantee that the code is completely separated. Modern.js also supports the packaging file of SSR Bundle and CSR Bundle products through the file suffixed with `.node.`.
-
-For example, the import of `fs-extra` in the code, when it is directly referenced to the component, will cause the CSR to load an error. You can create `.ts` and `.node.ts` files of the same name as a layer of proxy:
-
-```ts title="compat.ts"
-export { readFileSync } from 'fs-extra';
-```
-
-```ts title="compat.node.ts"
-export const readFileSync: any = () => {};
-```
-
-use `./compat` directly into the file. At this time, files with the `.node.ts` suffix will be used first in the SSR environment, and files with the `.ts` suffix will be used in the CSR environment.
-
-```ts title="App.tsx"
-import { readFileSync } from './compat'
-
-export const loader = () => {
-  const file = readFileSync('./myfile');
-  return {
-    ...
-  };
-};
-```
-
-### Independent File
-
-Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/docs/guides/basic-features/routes) developed and designed [Data Fetch](/docs/guides/basic-features/data-fetch) to separate CSR and SSR code。
-
-## Remote Request
-
-When initiating remote requests in SSR, developers sometimes use request tools. Some interfaces need to pass user cookies, which developers can get through the ['useRuntimeContext'](/docs/guides/basic-features/data-fetch#route-loader) API to achieve.
-
-It should be noted, the request header of the HTML request is obtained, which may not be applicable to remote requests, so **must not** pass through all request headers.
-
-In addition, some backend interfaces, or general gateways, will verify according to the information in the request header, and full pass-through is prone to various problems that are difficult to debug. It is recommended that **pass-through on demand**.
-
-Be sure to filter the `host` field if you really need to pass through all request headers.
-
-## Stream SSR
-
-Modern.js supports streaming rendering in React 18, the default rendering mode can be modified with the following configuration:
-
-```json
-{
-  "server": {
-    "ssr": {
-      "mode": "stream"
-    }
-  }
-}
-```
-
-:::note
-At present Modern.js built-in data fetch does not support streaming rendering. If app need it, developers can build it according to the demo of React Stream SSR.
-:::

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/testing.md

@@ -1,46 +0,0 @@
----
-sidebar_position: 10
-title: Testing
----
-
-Modern.js inherits the testing capabilities of [Jest](https://jestjs.io/) by default.
-
-First need to execute `pnpm run new` enable [unit test/integration test] features：
-
-```
-? 请选择你想要的操作： 启用可选功能
-? 启用可选功能： 启用「单元测试 / 集成测试」功能
-```
-
-After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.
-
-register plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import testPlugin from '@modern-js/plugin-testing';
-
-// https://modernjs.dev/docs/apis/app/config
-export default defineConfig({
-  plugins: [..., testPlugin()],
-});
-```
-
-## Test file
-
-Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`。
-
-If you need to customize the test directory, you can configure it with [tools.jest](/docs/configure/app/tools/jest).
-
-## Usage
-
-Modern.js test support [testing-library](https://testing-library.com/docs/). API can be imported from `@modern-js/runtime/testing`.
-
-```
-import { render, screen } from '@modern-js/runtime/testing';
-```
-
-Other Modern.js supported testing APIs can be found [here](/docs/apis/app/runtime/testing/cleanup)。
-
-## transform
-
-Modern.js tests use [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation by default. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/docs/configure/app/testing/transformer).