Cypress
Cypress 是一个用于 E2E 测试和组件测试的框架。
在 Modern.js 中使用 Cypress 需要先安装依赖，可以执行以下命令：
npm install -D cypress接下来，创建 cypress.config.ts 文件，并添加以下内容：
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {},
},
})编写测试用例
现在，使用 Cypress 来编写一个 E2E 用例，首先创建两张 Modern.js 的页面。
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;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;接下来，创建测试用例文件：
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 文档解决。
你可以将命令添加到 package.json 中：
package.json
{
"scripts": {
"test": "cypress open"
}
}运行测试用例
执行上述 test 命令，运行测试用例：
DevTools listening on ws://127.0.0.1:55203/devtools/browser/xxxxxCypress 会打开一个无头浏览器，按照提示你可以找到对应的测试文件，并自动运行 E2E 测试：
