@modern-js/main-doc 0.0.0-nightly-20240605170621 → 0.0.0-nightly-20240606170638
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/guides/get-started/tech-stack.mdx +0 -6
- package/docs/en/guides/topic-detail/framework-plugin/plugin-api.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/create/option.md +0 -5
- package/docs/en/guides/topic-detail/generator/create/use.mdx +1 -10
- package/docs/en/guides/topic-detail/generator/new/config.md +0 -29
- package/docs/en/guides/topic-detail/generator/new/use.md +0 -20
- package/docs/zh/guides/get-started/tech-stack.mdx +0 -6
- package/docs/zh/guides/topic-detail/framework-plugin/plugin-api.mdx +1 -1
- package/docs/zh/guides/topic-detail/generator/create/option.md +0 -5
- package/docs/zh/guides/topic-detail/generator/create/use.mdx +1 -10
- package/docs/zh/guides/topic-detail/generator/new/config.md +0 -31
- package/docs/zh/guides/topic-detail/generator/new/use.md +0 -20
- package/package.json +5 -5
- package/docs/en/apis/app/runtime/testing/_category_.json +0 -4
- package/docs/en/apis/app/runtime/testing/act.mdx +0 -35
- package/docs/en/apis/app/runtime/testing/cleanup.mdx +0 -40
- package/docs/en/apis/app/runtime/testing/render.mdx +0 -71
- package/docs/en/apis/app/runtime/testing/renderApp.mdx +0 -34
- package/docs/en/configure/app/testing/_category_.json +0 -4
- package/docs/en/configure/app/testing/transformer.mdx +0 -17
- package/docs/en/configure/app/tools/jest.mdx +0 -40
- package/docs/en/guides/advanced-features/testing.mdx +0 -47
- package/docs/en/guides/topic-detail/changesets/_category_.json +0 -4
- package/docs/en/guides/topic-detail/changesets/add.mdx +0 -125
- package/docs/en/guides/topic-detail/changesets/changelog.mdx +0 -238
- package/docs/en/guides/topic-detail/changesets/commit.mdx +0 -269
- package/docs/en/guides/topic-detail/changesets/config.mdx +0 -147
- package/docs/en/guides/topic-detail/changesets/github.mdx +0 -175
- package/docs/en/guides/topic-detail/changesets/introduce.mdx +0 -56
- package/docs/en/guides/topic-detail/changesets/release-note.mdx +0 -274
- package/docs/en/guides/topic-detail/changesets/release-pre.mdx +0 -49
- package/docs/en/guides/topic-detail/changesets/release.mdx +0 -229
- package/docs/en/guides/topic-detail/model/test-model.mdx +0 -45
- package/docs/zh/apis/app/runtime/testing/_category_.json +0 -4
- package/docs/zh/apis/app/runtime/testing/act.mdx +0 -35
- package/docs/zh/apis/app/runtime/testing/cleanup.mdx +0 -40
- package/docs/zh/apis/app/runtime/testing/render.mdx +0 -71
- package/docs/zh/apis/app/runtime/testing/renderApp.mdx +0 -32
- package/docs/zh/configure/app/testing/_category_.json +0 -4
- package/docs/zh/configure/app/testing/transformer.mdx +0 -19
- package/docs/zh/configure/app/tools/jest.mdx +0 -40
- package/docs/zh/guides/advanced-features/testing.mdx +0 -47
- package/docs/zh/guides/topic-detail/changesets/_category_.json +0 -4
- package/docs/zh/guides/topic-detail/changesets/add.mdx +0 -126
- package/docs/zh/guides/topic-detail/changesets/changelog.mdx +0 -238
- package/docs/zh/guides/topic-detail/changesets/commit.mdx +0 -269
- package/docs/zh/guides/topic-detail/changesets/config.mdx +0 -147
- package/docs/zh/guides/topic-detail/changesets/github.mdx +0 -175
- package/docs/zh/guides/topic-detail/changesets/introduce.mdx +0 -56
- package/docs/zh/guides/topic-detail/changesets/release-note.mdx +0 -274
- package/docs/zh/guides/topic-detail/changesets/release-pre.mdx +0 -50
- package/docs/zh/guides/topic-detail/changesets/release.mdx +0 -231
- package/docs/zh/guides/topic-detail/model/test-model.mdx +0 -45
- package/docs/zh/guides/topic-detail/monorepo/_category_.json +0 -4
- package/docs/zh/guides/topic-detail/monorepo/create-sub-project.mdx +0 -53
- package/docs/zh/guides/topic-detail/monorepo/intro.mdx +0 -14
- package/docs/zh/guides/topic-detail/monorepo/publish.mdx +0 -69
- package/docs/zh/guides/topic-detail/monorepo/sub-project-interface.mdx +0 -143
@@ -83,12 +83,6 @@ Modern.js supports the use of [styled-components](https://styled-components.com/
|
|
83
83
|
|
84
84
|
If you need to use other CSS-in-JS solutions, you can integrate them into your project on your own.
|
85
85
|
|
86
|
-
## Testing Framework
|
87
|
-
|
88
|
-
Modern.js supports the use of [Jest](https://jestjs.io/) for unit testing or integration testing. This feature is optional. Please refer to ["Using Jest"](/en/guides/advanced-features/testing) to enable it.
|
89
|
-
|
90
|
-
If you need to use [Vitest](https://vitest.dev/) or other testing frameworks, you can integrate them into your project on your own.
|
91
|
-
|
92
86
|
## UI Components
|
93
87
|
|
94
88
|
Modern.js can be used with any React UI component library from the community, such as [MUI](https://mui.com/), [Ant Design](https://ant.design/), [Arco Design](https://github.com/arco-design/arco-design), [Semi Design](https://semi.design/), [Radix UI](https://www.radix-ui.com/), and more.
|
@@ -105,7 +105,7 @@ interface IAppContext {
|
|
105
105
|
/** Information for server routes */
|
106
106
|
serverRoutes: ServerRoute[];
|
107
107
|
/** Tools type of the current project */
|
108
|
-
toolsType?: 'app-tools' | 'module-tools'
|
108
|
+
toolsType?: 'app-tools' | 'module-tools';
|
109
109
|
/** Type of the bundler being used */
|
110
110
|
bundlerType?: 'webpack' | 'rspack' | 'esbuild';
|
111
111
|
}
|
@@ -20,7 +20,6 @@ Options:
|
|
20
20
|
-d,--debug using debug mode to log something (default: false)
|
21
21
|
--mwa create mwa application using default config (default: false)
|
22
22
|
--module create module application using default config (default: false)
|
23
|
-
--monorepo create monorepo application using default config (default: false)
|
24
23
|
--generator <generator> run custom generator
|
25
24
|
-p, --plugin <plugin> use generator plugin to create new solution or customize Modern.js solution (default: [])
|
26
25
|
--dist-tag <distTag> use specified tag version for it\'s generator (default: "")
|
@@ -89,10 +88,6 @@ Quickly create a Web App project.
|
|
89
88
|
|
90
89
|
Quickly create a Npm Module project.
|
91
90
|
|
92
|
-
## --monorepo
|
93
|
-
|
94
|
-
Quickly create a Monorepo project.
|
95
|
-
|
96
91
|
## -p, --plugin \<plugin>
|
97
92
|
|
98
93
|
Specify a generator plugin.
|
@@ -4,7 +4,7 @@ sidebar_position: 1
|
|
4
4
|
|
5
5
|
# Usage
|
6
6
|
|
7
|
-
Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools)
|
7
|
+
Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools).
|
8
8
|
|
9
9
|
The following will introduce how to use `@modern-js/create`.
|
10
10
|
|
@@ -47,12 +47,3 @@ npx @modern-js/create@latest npm-module
|
|
47
47
|
? Please select the programming language: TS
|
48
48
|
? Please select the package manager: pnpm
|
49
49
|
```
|
50
|
-
|
51
|
-
### Create Monorepo Project
|
52
|
-
|
53
|
-
```bash
|
54
|
-
npx @modern-js/create@latest monorepo
|
55
|
-
? Please select the type of project you want to create: Monorepo
|
56
|
-
? Please select the package manager: pnpm
|
57
|
-
```
|
58
|
-
|
@@ -117,32 +117,3 @@ Options:
|
|
117
117
|
- Enable Storybook -- storybook
|
118
118
|
|
119
119
|
- Enable Runtime API -- runtime_api
|
120
|
-
|
121
|
-
## Monorepo
|
122
|
-
|
123
|
-
### sub_solution
|
124
|
-
|
125
|
-
Question: Please select the type of project you want to create.
|
126
|
-
|
127
|
-
Options:
|
128
|
-
|
129
|
-
- Web App -- mwa
|
130
|
-
- Npm Module -- module
|
131
|
-
|
132
|
-
### packageName
|
133
|
-
|
134
|
-
Question: Please fill in the project name
|
135
|
-
|
136
|
-
:::info
|
137
|
-
The value of the `name` field in the `package.json` file of the sub-project, which is a string type.
|
138
|
-
|
139
|
-
:::
|
140
|
-
|
141
|
-
### packagePath
|
142
|
-
|
143
|
-
Question: Please fill in the sub-project directory name
|
144
|
-
|
145
|
-
:::info
|
146
|
-
The name of the subdirectory in the `apps` or `packages` directory on which the sub-project is based, which is a string type.
|
147
|
-
|
148
|
-
:::
|
@@ -73,23 +73,3 @@ npm run new
|
|
73
73
|
```
|
74
74
|
|
75
75
|
After running, Storybook plugin dependencies will be installed in the project, and the `storybook` command will be added. A `stories` directory will be created for Storybook module development, along with prompt information for registering Storybook plugins.
|
76
|
-
|
77
|
-
## Monorepo
|
78
|
-
|
79
|
-
Monorepo projects use the `new` command provided by `@modern-js/monorepo-tools`.
|
80
|
-
|
81
|
-
The `new` command provides the ability to create sub-project.
|
82
|
-
|
83
|
-
For example:
|
84
|
-
|
85
|
-
Create Web App Sub-project:
|
86
|
-
|
87
|
-
```bash
|
88
|
-
? Please select the type of project you want to create: Web App
|
89
|
-
? Please fill in the sub-project name: web_app
|
90
|
-
? Please fill in the sub-project directory name: web_app
|
91
|
-
? Please select the programming language: TS
|
92
|
-
? Please select the bundler: webpack
|
93
|
-
```
|
94
|
-
|
95
|
-
After running, a sub-project named `web_app` will be created in the `apps` directory of the project. In the sub-project directory, you can still run the `new` command to create project elements and enable features.
|
@@ -83,12 +83,6 @@ Modern.js 支持使用 [styled-components](https://styled-components.com/),请
|
|
83
83
|
|
84
84
|
如果你需要使用其他 CSS-in-JS 方案,可以自行集成到你的项目中。
|
85
85
|
|
86
|
-
## 测试框架
|
87
|
-
|
88
|
-
Modern.js 支持使用 [Jest](https://jestjs.io/) 进行单元测试或集成测试。该功能为可选功能,请参考[「使用 Jest 测试」](/guides/advanced-features/testing) 启用。
|
89
|
-
|
90
|
-
如果你需要使用 [Vitest](https://vitest.dev/) 或其他测试框架,可以自行集成到你的项目中。
|
91
|
-
|
92
86
|
## 组件库
|
93
87
|
|
94
88
|
Modern.js 可以与社区中任意的 React 组件库搭配使用,比如 [MUI](https://mui.com/)、[Ant Design](https://ant.design/)、[Arco Design](https://github.com/arco-design/arco-design)、[Semi Design](https://semi.design/)、[Radix UI](https://www.radix-ui.com/) 等。
|
@@ -105,7 +105,7 @@ interface IAppContext {
|
|
105
105
|
/** 服务端路由信息 */
|
106
106
|
serverRoutes: ServerRoute[];
|
107
107
|
/** 当前项目类型 */
|
108
|
-
toolsType?: 'app-tools' | 'module-tools'
|
108
|
+
toolsType?: 'app-tools' | 'module-tools';
|
109
109
|
/** 当前使用的打包工具类型 */
|
110
110
|
bundlerType?: 'webpack' | 'rspack' | 'esbuild';
|
111
111
|
}
|
@@ -20,7 +20,6 @@ Options:
|
|
20
20
|
-d,--debug 开启 Debug 模式,打印调试日志信息 (default: false)
|
21
21
|
--mwa 一键创建 Web 应用(使用默认配置) (default: false)
|
22
22
|
--module 一键创建 Module 应用(使用默认配置) (default: false)
|
23
|
-
--monorepo 一键创建 Monorepo 应用(使用默认配置) (default: false)
|
24
23
|
--generator <generator> 使用自定义生成器
|
25
24
|
-p, --plugin <plugin> 使用生成器插件创建新的工程方案类型或定制化 Modern.js 工程方案 (default: [])
|
26
25
|
--dist-tag <distTag> 生成项目时生成器使用特殊的 npm Tag (default: "")
|
@@ -89,10 +88,6 @@ npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
|
|
89
88
|
|
90
89
|
快速创建 Npm 模块项目。
|
91
90
|
|
92
|
-
## --monorepo
|
93
|
-
|
94
|
-
快速创建 Monorepo 项目。
|
95
|
-
|
96
91
|
## -p, --plugin \<plugin>
|
97
92
|
|
98
93
|
指定生成器插件。
|
@@ -4,7 +4,7 @@ sidebar_position: 1
|
|
4
4
|
|
5
5
|
# 使用
|
6
6
|
|
7
|
-
Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目,例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)
|
7
|
+
Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目,例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)。
|
8
8
|
|
9
9
|
下面将介绍 `@modern-js/create` 的使用姿势。
|
10
10
|
|
@@ -47,12 +47,3 @@ npx @modern-js/create@latest npm-module
|
|
47
47
|
? 请选择开发语言 TS
|
48
48
|
? 请选择包管理工具 pnpm
|
49
49
|
```
|
50
|
-
|
51
|
-
### 创建 Monorepo
|
52
|
-
|
53
|
-
```bash
|
54
|
-
npx @modern-js/create@latest monorepo
|
55
|
-
? 请选择你想创建的工程类型 Monorepo
|
56
|
-
? 请选择包管理工具 pnpm
|
57
|
-
```
|
58
|
-
|
@@ -60,8 +60,6 @@ sidebar_position: 3
|
|
60
60
|
|
61
61
|
- 启用「微前端」模式 -- micro_frontend
|
62
62
|
|
63
|
-
- 启用「单元测试 / 集成测试」功能 -- test
|
64
|
-
|
65
63
|
- 启用「基于 UA 的 Polyfill」功能 -- polyfill
|
66
64
|
|
67
65
|
- 启用「全局代理」 -- proxy
|
@@ -111,37 +109,8 @@ sidebar_position: 3
|
|
111
109
|
|
112
110
|
选项:
|
113
111
|
|
114
|
-
- 启用「单元测试 / 集成测试」功能 -- test
|
115
|
-
|
116
112
|
- 启用 「Tailwind CSS」 支持 -- tailwindcss
|
117
113
|
|
118
114
|
- 启用「Storybook」 -- storybook
|
119
115
|
|
120
116
|
- 启用「Runtime API」 -- runtime_api
|
121
|
-
|
122
|
-
## Monorepo
|
123
|
-
|
124
|
-
### sub_solution
|
125
|
-
|
126
|
-
问题:请选择你想创建的工程类型
|
127
|
-
|
128
|
-
选项:
|
129
|
-
|
130
|
-
- Web 应用 -- mwa
|
131
|
-
- Npm 模块 -- module
|
132
|
-
|
133
|
-
### packageName
|
134
|
-
|
135
|
-
问题:请填写子项目名称
|
136
|
-
|
137
|
-
:::info
|
138
|
-
子项目的 `package.json` 的 name 字段值,该配置值为字符串类型。
|
139
|
-
:::
|
140
|
-
|
141
|
-
### packagePath
|
142
|
-
|
143
|
-
问题:请填写子项目目录名称
|
144
|
-
|
145
|
-
:::info
|
146
|
-
子项目基于 apps 或者 packages 目录的子目录名称,该字段为字符串类型。
|
147
|
-
:::
|
@@ -72,23 +72,3 @@ npm run new
|
|
72
72
|
```
|
73
73
|
|
74
74
|
执行完成后将会在项目安装 Storybook 插件相关依赖,增加 `storybook` 命令,创建 `stories` 目录用于 Storybook 模块的开发并提供提示信息用于注册 Storybook 插件。
|
75
|
-
|
76
|
-
## Monorepo
|
77
|
-
|
78
|
-
Monorepo 项目通过 `@modern-js/monorepo-tools` 提供 new 命令。
|
79
|
-
|
80
|
-
new 命令提供了创建子项目的能力。
|
81
|
-
|
82
|
-
例如:
|
83
|
-
|
84
|
-
创建 Web 应用子项目:
|
85
|
-
|
86
|
-
```bash
|
87
|
-
? 请选择你想创建的工程类型 Web 应用
|
88
|
-
? 请填写子项目名称 web_app
|
89
|
-
? 请填写子项目目录名称 web_app
|
90
|
-
? 请选择开发语言 TS
|
91
|
-
? 请选择构建工具 webpack
|
92
|
-
```
|
93
|
-
|
94
|
-
执行完成后将会在项目 apps 目录创建 `web_app` 的子项目,在子项目目录中依然可以执行 new 命令创建项目元素和开启功能。
|
package/package.json
CHANGED
@@ -15,17 +15,17 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "0.0.0-nightly-
|
18
|
+
"version": "0.0.0-nightly-20240606170638",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public",
|
22
22
|
"provenance": true
|
23
23
|
},
|
24
24
|
"dependencies": {
|
25
|
-
"@modern-js/sandpack-react": "0.0.0-nightly-
|
25
|
+
"@modern-js/sandpack-react": "0.0.0-nightly-20240606170638"
|
26
26
|
},
|
27
27
|
"peerDependencies": {
|
28
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
28
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240606170638"
|
29
29
|
},
|
30
30
|
"devDependencies": {
|
31
31
|
"classnames": "^2",
|
@@ -39,8 +39,8 @@
|
|
39
39
|
"@rspress/shared": "1.18.2",
|
40
40
|
"@types/node": "^16",
|
41
41
|
"@types/fs-extra": "9.0.13",
|
42
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
43
|
-
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-
|
42
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240606170638",
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240606170638"
|
44
44
|
},
|
45
45
|
"scripts": {
|
46
46
|
"dev": "rspress dev",
|
@@ -1,35 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: act
|
3
|
-
---
|
4
|
-
# act
|
5
|
-
|
6
|
-
Used to ensure that behaviors such as rendering, events, data fetching, etc. have been applied to the DOM.
|
7
|
-
|
8
|
-
## Usage
|
9
|
-
|
10
|
-
```ts
|
11
|
-
import { act } from '@modern-js/runtime/testing';
|
12
|
-
```
|
13
|
-
|
14
|
-
## Function Signature
|
15
|
-
|
16
|
-
`act` is the same as [react-dom/test-utils act function](https://reactjs.org/docs/testing-recipes.html#act).
|
17
|
-
|
18
|
-
## Example
|
19
|
-
|
20
|
-
```tsx
|
21
|
-
import ReactDOM from 'react-dom';
|
22
|
-
import { act } from '@modern-js/runtime/testing';
|
23
|
-
import { Foo } from '@/components/Foo';
|
24
|
-
|
25
|
-
describe('test act', () => {
|
26
|
-
it('it should be foo', () => {
|
27
|
-
const el = document.createElement('div');
|
28
|
-
act(() => {
|
29
|
-
ReactDOM.render(<Foo />, el);
|
30
|
-
});
|
31
|
-
|
32
|
-
expect(el.innerHTML).toBe('<div>Foo</div>');
|
33
|
-
});
|
34
|
-
});
|
35
|
-
```
|
@@ -1,40 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: cleanup
|
3
|
-
sidebar_position: 3
|
4
|
-
---
|
5
|
-
# cleanup
|
6
|
-
|
7
|
-
Used to uninstall all currently rendered components.
|
8
|
-
|
9
|
-
## Usage
|
10
|
-
|
11
|
-
```ts
|
12
|
-
import { cleanup } from '@modenr-js/runtime/testing';
|
13
|
-
```
|
14
|
-
|
15
|
-
## Function Signature
|
16
|
-
|
17
|
-
`function cleanup(): void`
|
18
|
-
|
19
|
-
## Example
|
20
|
-
|
21
|
-
:::info
|
22
|
-
Note that if you are using a testing framework that supports afterEach and it is injected into your testing environment (such as mocha, Jest, and Jasmine), **will execute `cleanup`** in the afterEach hook by default. Otherwise, you will need to do manual cleanup after each test.
|
23
|
-
|
24
|
-
:::
|
25
|
-
|
26
|
-
For example, if you use the [ava](https://github.com/avajs/ava) test framework, then you need to use the `test.after Each` hook like this.
|
27
|
-
|
28
|
-
```tsx
|
29
|
-
import { cleanup, render } from '@modern-js/runtime/testing';
|
30
|
-
import test from 'ava';
|
31
|
-
|
32
|
-
test.afterEach(cleanup);
|
33
|
-
|
34
|
-
test('renders into document', () => {
|
35
|
-
render(<div />);
|
36
|
-
// ...
|
37
|
-
});
|
38
|
-
|
39
|
-
// ... more tests ...
|
40
|
-
```
|
@@ -1,71 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: render
|
3
|
-
---
|
4
|
-
# render
|
5
|
-
|
6
|
-
Used to render the component in the test case.
|
7
|
-
|
8
|
-
## Usage
|
9
|
-
|
10
|
-
```ts
|
11
|
-
import { render } from '@modern-js/runtime/testing';
|
12
|
-
```
|
13
|
-
|
14
|
-
## Function Signature
|
15
|
-
|
16
|
-
```ts
|
17
|
-
type Options = {
|
18
|
-
container: DOMElement;
|
19
|
-
baseElement: DOMElement;
|
20
|
-
hydrate: boolean;
|
21
|
-
warpper: React.ComponentType<{children: ReactNode}>;
|
22
|
-
queries: any;
|
23
|
-
};
|
24
|
-
|
25
|
-
type RenderResult = {
|
26
|
-
{...queries}: any;
|
27
|
-
container: DOMElement;
|
28
|
-
baseElement: DOMElement;
|
29
|
-
debug: function;
|
30
|
-
rerender: function;
|
31
|
-
unmount: function;
|
32
|
-
asFragment: function;
|
33
|
-
}
|
34
|
-
|
35
|
-
function render(ui: React.ReactElement<any>, options: Options): RenderResult;
|
36
|
-
```
|
37
|
-
|
38
|
-
### Input
|
39
|
-
|
40
|
-
- `ui`: the React component that needs to be rendered.
|
41
|
-
- `options`: render options.
|
42
|
-
- `container`: the dom which component mounted. by default create a `div` element, and auto append to `document.body`. the default value is `document.body.append(document.createElement('div'))`.
|
43
|
-
- `baseElement`: Used to specify the `basename` used in `queries`. If `container` is specified, the default value is the value of `container`, otherwise it is `document.body`.
|
44
|
-
- `hydrate`: If set to `true`, the [ReactDOM.hydrate](https://react.dev/reference/react-dom/hydrate) rendering component is used. The default value is `false`.
|
45
|
-
- `wrapper`: a react component that can be used to customize rendering logic.
|
46
|
-
- `queries`: customize some own `queries`.
|
47
|
-
|
48
|
-
### Return Value
|
49
|
-
|
50
|
-
- `{...queries}`: all available [queries](https://testing-library.com/docs/queries/about/).
|
51
|
-
- `container`: the DOM element that React component mounted.
|
52
|
-
- `baseElement`
|
53
|
-
- `debug`
|
54
|
-
- `rerender`: if you want to test some scene when a rendered component is updated, you can use rerender for reality.
|
55
|
-
- `unmount`: unmount rendered components. This API is helpful if you want to test what happens after the component is unmounted.
|
56
|
-
- `asFragment`: return the [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) of rendered component. used to test the response of the DOM structure after the react event is triggered.
|
57
|
-
|
58
|
-
## Example
|
59
|
-
|
60
|
-
```ts
|
61
|
-
import { render } from '@modern-js/runtime/testing';
|
62
|
-
import App from './App';
|
63
|
-
|
64
|
-
test('renders a message', () => {
|
65
|
-
const { container, getByText } = render(<App />);
|
66
|
-
expect(getByText('Hello, world!')).toBeInTheDocument();
|
67
|
-
expect(container.firstChild).toMatchInlineSnapshot(`
|
68
|
-
<h1>Hello, World!</h1>
|
69
|
-
`);
|
70
|
-
});
|
71
|
-
```
|
@@ -1,34 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: renderApp
|
3
|
-
---
|
4
|
-
# renderApp
|
5
|
-
|
6
|
-
The `render` function is used to test normal components, and the `renderApp` function is used to test App components.
|
7
|
-
|
8
|
-
## Usage
|
9
|
-
|
10
|
-
```ts
|
11
|
-
import { renderApp } from '@modern-js/runtime/testing';
|
12
|
-
```
|
13
|
-
|
14
|
-
App components refer to components that contain some Modern.js contexts, such as App root components, Containers using Models, etc.
|
15
|
-
|
16
|
-
For the testing of such components, you can use the `renderApp` function, which will automatically wrap the context information according to the current `modern.config.js`.
|
17
|
-
|
18
|
-
## Function Signature
|
19
|
-
|
20
|
-
`renderApp` is the same as [render](./render.mdx).
|
21
|
-
|
22
|
-
## Example
|
23
|
-
|
24
|
-
```ts
|
25
|
-
import { renderApp } from '@modern-js/runtime/testing';
|
26
|
-
import App from './App';
|
27
|
-
|
28
|
-
describe('test', () => {
|
29
|
-
it('test App', () => {
|
30
|
-
const { getByText } = renderApp(<App />);
|
31
|
-
expect(getByText('Hello Modern!')).toBeInTheDocument();
|
32
|
-
});
|
33
|
-
});
|
34
|
-
```
|
@@ -1,17 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: testing.transformer
|
3
|
-
sidebar_label: transformer
|
4
|
-
sidebar_position: 1
|
5
|
-
---
|
6
|
-
# transformer
|
7
|
-
|
8
|
-
- **Type:** `'babel-jest' | 'ts-jest'`
|
9
|
-
- **Default:** `babel-jest`
|
10
|
-
|
11
|
-
First need to run `new` command to enable [Unit Test / Integration Test] features.
|
12
|
-
|
13
|
-
Configure the compilation tool used during test execution. By default, `babel-jest` is used. You can configure it to use either [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest).
|
14
|
-
|
15
|
-
:::info Additional
|
16
|
-
`babel-jest` can compile TypeScript files but does not perform type checking. If you want to perform type checking on your TypeScript files while running test cases, you can use `ts-jest`.
|
17
|
-
:::
|
@@ -1,40 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_label: jest
|
3
|
-
---
|
4
|
-
|
5
|
-
# tools.jest
|
6
|
-
|
7
|
-
- **Type:** `Object | Function`
|
8
|
-
- **Default:** `{}`
|
9
|
-
|
10
|
-
:::caution Caution
|
11
|
-
First you need to enable the "Unit Test" function using [new](/apis/app/commands#modern-new) command.
|
12
|
-
|
13
|
-
:::
|
14
|
-
|
15
|
-
Corresponding to the configuration of [Jest](https://jestjs.io/docs/configuration), when of type `Object`, all underlying configurations supported by Jest can be configured.
|
16
|
-
|
17
|
-
```js title=modern.config.js
|
18
|
-
export default defineConfig({
|
19
|
-
tools: {
|
20
|
-
jest: {
|
21
|
-
testTimeout: 10000,
|
22
|
-
},
|
23
|
-
},
|
24
|
-
});
|
25
|
-
```
|
26
|
-
|
27
|
-
When the value is of type `Function`, the default configuration is passed in as the first parameter and a new Jest configuration object needs to be returned.
|
28
|
-
|
29
|
-
```js title=modern.config.js
|
30
|
-
export default defineConfig({
|
31
|
-
tools: {
|
32
|
-
jest: options => {
|
33
|
-
return {
|
34
|
-
...options,
|
35
|
-
testTimeout: 10000,
|
36
|
-
};
|
37
|
-
},
|
38
|
-
},
|
39
|
-
});
|
40
|
-
```
|
@@ -1,47 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 14
|
3
|
-
---
|
4
|
-
|
5
|
-
# Using Jest
|
6
|
-
|
7
|
-
Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
|
8
|
-
|
9
|
-
First need to execute `pnpm run new` to enable "unit test/integration test" features:
|
10
|
-
|
11
|
-
```bash
|
12
|
-
? Please select the operation you want: Enable features
|
13
|
-
? Please select the feature name: Enable Unit Test / Integration Test
|
14
|
-
```
|
15
|
-
|
16
|
-
After executing the above command, the `"test": "modern test"` command will be added in `package.json` automatically.
|
17
|
-
|
18
|
-
After registering the `@modern-js/plugin-testing` plugin in `modern.config.ts`, you can use the testing features:
|
19
|
-
|
20
|
-
```ts title="modern.config.ts"
|
21
|
-
import { testingPlugin } from '@modern-js/plugin-testing';
|
22
|
-
|
23
|
-
export default defineConfig({
|
24
|
-
plugins: [..., testingPlugin()],
|
25
|
-
});
|
26
|
-
```
|
27
|
-
|
28
|
-
## Test file
|
29
|
-
|
30
|
-
Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`.
|
31
|
-
|
32
|
-
If you need to customize the test directory, you can configure it with [tools.jest](/configure/app/tools/jest).
|
33
|
-
|
34
|
-
## Usage
|
35
|
-
|
36
|
-
Modern.js test support [testing-library](https://testing-library.com/docs/). API can be imported from `@modern-js/runtime/testing`.
|
37
|
-
|
38
|
-
```ts
|
39
|
-
import { render, screen } from '@modern-js/runtime/testing';
|
40
|
-
```
|
41
|
-
|
42
|
-
Other testing APIs supported by Modern.js can be referred to [here](/apis/app/runtime/testing/cleanup).
|
43
|
-
|
44
|
-
## transform
|
45
|
-
|
46
|
-
By default, Modern.js testing uses [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).
|
47
|
-
|