# 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)