@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.8 → 3.2.0-ultramodern.81

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

@@ -1,148 +0,0 @@
-# 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.ts` 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
-```

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

@@ -1,100 +0,0 @@
-# Vitest
-
-Vitest is a testing framework driven by Vite, which can be used for unit testing in combination with React Testing Library.
-
-To use Vitest 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 vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom", 
-  yarn: "yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom", 
-  pnpm: "pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom",
-  bun: "bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom"
-}} />
-
-Next, you need to create a Vitest configuration file `vitest.config.ts` with the following content:
-
-```ts title="vitest.config.ts"
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
- 
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-  },
-})
-```
-
-For more information about Vitest configuration, you can refer to the [Vitest configuration documentation](https://vitest.dev/config/#configuration).
-
-You can optionally add the `vitest` command to `package.json`:
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "vitest"
-  }
-}
-```
-
-After running this command, Vitest will automatically watch your file changes and rerun the test cases.
-
-## Create Unit Tests
-
-First, 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 { expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { BrowserRouter as Router } from '@modern-js/runtime/router';
-import Page from '../routes/page';
-
-test('Page', () => {
-  render(
-    <Router>
-      <Page />
-    </Router>,
-  );
-  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined();
-});
-```
-
-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
-✓ src/__tests__/page.test.tsx (1)
-  ✓ Page
-
-Test Files  1 passed (1)
-    Tests  1 passed (1)
-  Start at  15:37:12
-  Duration  999ms (transform 119ms, setup 0ms, collect 365ms, tests 33ms, environment 421ms, prepare 44ms)
-
-
-PASS  Waiting for file changes...
-```

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

@@ -1,95 +0,0 @@
-# Cypress
-
-Cypress 是一个用于 E2E 测试和组件测试的框架。
-
-在 Modern.js 中使用 Cypress 需要先安装依赖，可以执行以下命令：
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{ npm: "npm install -D cypress", yarn: "yarn add -D cypress", pnpm: "pnpm install -D cypress" }} />
-
-接下来，创建 `cypress.config.ts` 文件，并添加以下内容：
-
-```ts
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  e2e: {
-    setupNodeEvents(on, config) {},
-  },
-})
-```
-
-## 编写测试用例
-
-现在，使用 Cypress 来编写一个 E2E 用例，首先创建两张 Modern.js 的页面。
-
-```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;
-```
-
-接下来，创建测试用例文件：
-
-```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')
-  })
-})
-```
-
-测试文件可能会缺少 API 的类型，你可以参考 [Cypress - Typescript](https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson) 文档解决。
-
-你可以将命令添加到 `package.json` 中：
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "cypress open"
-  }
-}
-```
-
-## 运行测试用例
-
-执行上述 `test` 命令，运行测试用例：
-
-```bash
-DevTools listening on ws://127.0.0.1:55203/devtools/browser/xxxxx
-```
-
-Cypress 会打开一个无头浏览器，按照提示你可以找到对应的测试文件，并自动运行 E2E 测试：
-
-![cypress](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/cypress.jpg)

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

@@ -1,148 +0,0 @@
-# Jest
-
-Jest 是一个 JavaScript 测试框架，它主要和 React Testing Library 一起用于单元测试和 Snapshot 测试。
-
-在 Modern.js 中使用 Jest 需要先安装依赖，可以执行以下命令：
-
-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"
-}} />
-
-随后，你可以运行以下命令，这将自动在项目中初始化 Jest，并生成一个基础的 `jest.config.ts` 配置：
-
-<PackageManagerTabs command={{
-  npm: "npm init jest@latest",
-  yarn: "yarn create jest@latest",
-  pnpm: "pnpm create jest@latest"
-}} />
-
-## 配置文件
-
-:::note
-本章节会使用 `.ts` 文件来完成 Jest 测试。
-:::
-
-相比于其他的测试框架，Jest 在构建层面需要更多的配置，例如处理 JSX 和 ESM 语法，因此首先需要安装一些额外的依赖：
-
-<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"
-}} />
-
-### 配置 Jest
-
-你需要进一步配置 `jest.config.ts` 文件，以便让 Jest 能够正确地编译和运行测试用例。下面是一个最基本的配置：
-
-```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;
-```
-
-配置中，将 `transformIgnorePatterns` 设置为了空数组，意味着所有的文件都会经过编译，如果你希望提升测试运行的速度，可以按需配置。
-
-`setupFilesAfterEnv` 会在启动时执行，在 `jest.setup.ts` 中，可以引入 `@testing-library/jest-dom`。它包含了一组便捷的自定义匹配器，例如 `.toBeInTheDocument()`，使编写测试变得更容易：
-
-```ts title="jest.setup.ts"
-import '@testing-library/jest-dom';
-```
-
-### 配置 Babel
-
-你需要配置 Babel 让 Jest 能够自动编译 JSX 等语法，下面是一个基本的配置：
-
-```js title="babel.config.js"
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    ['@babel/preset-react', { runtime: 'automatic' }],
-    '@babel/preset-typescript',
-  ],
-};
-```
-
-## 编写测试用例
-
-现在，你可以开始编写测试用例了，首先在 `package.json` 中添加一个 `test` 命令：
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "jest"
-  }
-}
-```
-
-创建一个简单的页面用于测试：
-
-```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="__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();
-  });
-});
-```
-
-上述用例中，我们从 `@modern-js/runtime/router` 引入了 `<Router>` 组件，这是因为 React Router 在渲染部分路由相关组件时，必须要有对应的上下文。
-
-:::note
-直接在 Modern.js 应用中运行时，`<Router>` 组件会自动注入。
-:::
-
-## 运行测试用例
-
-执行上述 `test` 命令，运行测试用例：
-
-```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
-```

package/docs/zh/guides/basic-features/testing/vitest.mdx

@@ -1,100 +0,0 @@
-# Vitest
-
-Vitest 是由 Vite 驱动的测试框架，和 React Testing Library 配合可以用于单元测试。
-
-在 Modern.js 中使用 Vitest 需要先安装依赖，可以执行以下命令：
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{ 
-  npm: "npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom", 
-  yarn: "yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom", 
-  pnpm: "pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom",
-  bun: "bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom"
-}} />
-
-接下来，你需要创建一个 Vitest 配置文件 `vitest.config.ts`，内容如下：
-
-```ts title="vitest.config.ts"
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
- 
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-  },
-})
-```
-
-更多关于 Vitest 配置的信息，可以参考 [Vitest 配置文档](https://vitest.dev/config/#configuration)。
-
-你可以选择性的将 `vitest` 命令添加到 `package.json` 中：
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "vitest"
-  }
-}
-```
-
-运行该命令后，Vitest 会自动监听你的文件变化，并重新运行用例。
-
-## 创建单元测试
-
-首先，创建一个简单的页面用于测试：
-
-```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="__tests__/page.test.tsx"
-import { expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { BrowserRouter as Router } from '@modern-js/runtime/router';
-import Page from '../routes/page';
-
-test('Page', () => {
-  render(
-    <Router>
-      <Page />
-    </Router>,
-  );
-  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined();
-});
-```
-
-上述用例中，我们从 `@modern-js/runtime/router` 引入了 `<Router>` 组件，这是因为 React Router 在渲染部分路由相关组件时，必须要有对应的上下文。
-
-:::note
-直接在 Modern.js 应用中运行时，`<Router>` 组件会自动注入。
-:::
-
-## 运行测试用例
-
-执行上述 `test` 命令，运行测试用例：
-
-```bash
-✓ src/__tests__/page.test.tsx (1)
-  ✓ Page
-
-Test Files  1 passed (1)
-    Tests  1 passed (1)
-  Start at  15:37:12
-  Duration  999ms (transform 119ms, setup 0ms, collect 365ms, tests 33ms, environment 421ms, prepare 44ms)
-
-
-PASS  Waiting for file changes...
-```