@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.
Files changed (58) hide show
  1. package/docs/en/guides/get-started/tech-stack.mdx +0 -6
  2. package/docs/en/guides/topic-detail/framework-plugin/plugin-api.mdx +1 -1
  3. package/docs/en/guides/topic-detail/generator/create/option.md +0 -5
  4. package/docs/en/guides/topic-detail/generator/create/use.mdx +1 -10
  5. package/docs/en/guides/topic-detail/generator/new/config.md +0 -29
  6. package/docs/en/guides/topic-detail/generator/new/use.md +0 -20
  7. package/docs/zh/guides/get-started/tech-stack.mdx +0 -6
  8. package/docs/zh/guides/topic-detail/framework-plugin/plugin-api.mdx +1 -1
  9. package/docs/zh/guides/topic-detail/generator/create/option.md +0 -5
  10. package/docs/zh/guides/topic-detail/generator/create/use.mdx +1 -10
  11. package/docs/zh/guides/topic-detail/generator/new/config.md +0 -31
  12. package/docs/zh/guides/topic-detail/generator/new/use.md +0 -20
  13. package/package.json +5 -5
  14. package/docs/en/apis/app/runtime/testing/_category_.json +0 -4
  15. package/docs/en/apis/app/runtime/testing/act.mdx +0 -35
  16. package/docs/en/apis/app/runtime/testing/cleanup.mdx +0 -40
  17. package/docs/en/apis/app/runtime/testing/render.mdx +0 -71
  18. package/docs/en/apis/app/runtime/testing/renderApp.mdx +0 -34
  19. package/docs/en/configure/app/testing/_category_.json +0 -4
  20. package/docs/en/configure/app/testing/transformer.mdx +0 -17
  21. package/docs/en/configure/app/tools/jest.mdx +0 -40
  22. package/docs/en/guides/advanced-features/testing.mdx +0 -47
  23. package/docs/en/guides/topic-detail/changesets/_category_.json +0 -4
  24. package/docs/en/guides/topic-detail/changesets/add.mdx +0 -125
  25. package/docs/en/guides/topic-detail/changesets/changelog.mdx +0 -238
  26. package/docs/en/guides/topic-detail/changesets/commit.mdx +0 -269
  27. package/docs/en/guides/topic-detail/changesets/config.mdx +0 -147
  28. package/docs/en/guides/topic-detail/changesets/github.mdx +0 -175
  29. package/docs/en/guides/topic-detail/changesets/introduce.mdx +0 -56
  30. package/docs/en/guides/topic-detail/changesets/release-note.mdx +0 -274
  31. package/docs/en/guides/topic-detail/changesets/release-pre.mdx +0 -49
  32. package/docs/en/guides/topic-detail/changesets/release.mdx +0 -229
  33. package/docs/en/guides/topic-detail/model/test-model.mdx +0 -45
  34. package/docs/zh/apis/app/runtime/testing/_category_.json +0 -4
  35. package/docs/zh/apis/app/runtime/testing/act.mdx +0 -35
  36. package/docs/zh/apis/app/runtime/testing/cleanup.mdx +0 -40
  37. package/docs/zh/apis/app/runtime/testing/render.mdx +0 -71
  38. package/docs/zh/apis/app/runtime/testing/renderApp.mdx +0 -32
  39. package/docs/zh/configure/app/testing/_category_.json +0 -4
  40. package/docs/zh/configure/app/testing/transformer.mdx +0 -19
  41. package/docs/zh/configure/app/tools/jest.mdx +0 -40
  42. package/docs/zh/guides/advanced-features/testing.mdx +0 -47
  43. package/docs/zh/guides/topic-detail/changesets/_category_.json +0 -4
  44. package/docs/zh/guides/topic-detail/changesets/add.mdx +0 -126
  45. package/docs/zh/guides/topic-detail/changesets/changelog.mdx +0 -238
  46. package/docs/zh/guides/topic-detail/changesets/commit.mdx +0 -269
  47. package/docs/zh/guides/topic-detail/changesets/config.mdx +0 -147
  48. package/docs/zh/guides/topic-detail/changesets/github.mdx +0 -175
  49. package/docs/zh/guides/topic-detail/changesets/introduce.mdx +0 -56
  50. package/docs/zh/guides/topic-detail/changesets/release-note.mdx +0 -274
  51. package/docs/zh/guides/topic-detail/changesets/release-pre.mdx +0 -50
  52. package/docs/zh/guides/topic-detail/changesets/release.mdx +0 -231
  53. package/docs/zh/guides/topic-detail/model/test-model.mdx +0 -45
  54. package/docs/zh/guides/topic-detail/monorepo/_category_.json +0 -4
  55. package/docs/zh/guides/topic-detail/monorepo/create-sub-project.mdx +0 -53
  56. package/docs/zh/guides/topic-detail/monorepo/intro.mdx +0 -14
  57. package/docs/zh/guides/topic-detail/monorepo/publish.mdx +0 -69
  58. 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' | 'monorepo-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), [Monorepo](/guides/topic-detail/monorepo/intro.html).
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' | 'monorepo-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)、[Monorepo](/guides/topic-detail/monorepo/intro.html) 等。
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-20240605170621",
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-20240605170621"
25
+ "@modern-js/sandpack-react": "0.0.0-nightly-20240606170638"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "0.0.0-nightly-20240605170621"
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-20240605170621",
43
- "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240605170621"
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,4 +0,0 @@
1
- {
2
- "label": "Testing API",
3
- "position": 11
4
- }
@@ -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,4 +0,0 @@
1
- {
2
- "label": "testing",
3
- "position": 10
4
- }
@@ -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
-
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Package Version Management",
3
- "position": 5
4
- }