跳转到内容
Astro Astro

测试

测试可以帮助你编写和维护工作的 Astro 代码。Astro 支持许多流行的单元测试、组件测试和端到端测试工具，包括 Jest、 Mocha、 Jasmine、 Cypress 和 Playwright。你甚至可以安装特定于框架的测试库，例如 React Test Library，以测试你的 UI 框架组件。

测试框架允许你声明关于代码在特定情况下应该如何行为的 断言(assertions) 或 期望(expectations)，然后将这些断言或期望与当前代码的实际行为进行比较。

Vitest

段落标题 Vitest

Vitest 是一个基于 esbuild 的 Vite-native 单元测试框架，它支持 ESM、TypeScript 和 JSX。

在你的 vitest.config.ts 配置文件 中使用 getViteConfig() 辅助函数来设置 Vitest。

vitest.config.ts
import { getViteConfig } from 'astro/config';


export default getViteConfig({
  test: {
    // Vitest 配置选项
  },
});

你可以在 GitHub 上查看 Astro + Vitest 启动模版。

Cypress

段落标题 Cypress

Cypress 是一个专为现代 Web 开发而建的前端测试工具。Cypress 允许您为 Astro 站点编写端到端测试。

安装

段落标题 安装

你可以使用你选择的包管理器来安装 Cypress。

Terminal window
npm install -D cypress

这将会在你的项目中作为开发依赖项，将 Cypress 本地安装。

配置

段落标题 配置

在你的项目根目录下创建一个 cypress.config.js 文件，内容如下：

cypress.config.js
import { defineConfig } from 'cypress'


export default defineConfig({
  e2e: {
    supportFile: false
  }
})

创建你的第一个 Cypress 测试

段落标题 创建你的第一个 Cypress 测试

  1. 选择一个页面进行测试。本例将测试下面的示例页面 index.astro。

    src/pages/index.astro
    ---
    ---
    <html lang="en">
      <head>
        <title>Astro is awesome!</title>
        <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen island architecture." />
      </head>
      <body>
      <h1>Hello world from Astro</h1>
      </body>
    </html>

  2. 在 cypress/e2e 文件夹中创建一个名为 index.cy.js 的文件。在文件中使用以下测试来验证页面的标题和开头是否正确。

    cypress/e2e/index.cy.js
    it('titles are correct', () => {
      const page = cy.visit('http://localhost:4321');
    

      page.get('title').should('have.text', 'Astro is awesome!')
      page.get('h1').should('have.text', 'Hello world from Astro');
    });

运行你的 Cypress 测试

段落标题 运行你的 Cypress 测试

Cypress 可以在命令行或 Cypress App 中运行。Cypress App 提供了一个可视化界面，用于运行和调试你的测试。

首先，启动开发服务器，这样 Cypress 就可以访问你的实时网站。

要通过命令行运行我们之前示例中的测试，请执行以下命令：

Terminal window
npx cypress run

或者，要通过 Cypress App 运行测试，请执行以下命令：

Terminal window
npx cypress open

在Cypress App 启动后，选择 E2E Testing，然后选择要用于运行测试的浏览器。

当测试运行完成时，如果你在输出中看到一个绿色的勾，这证明你的测试通过了：

npx cypress run 的输出
Running:  index.cy.js                                                                     (1 of 1)




✓ titles are correct (107ms)


1 passing (1s)

下一步

段落标题 下一步

关于 Cypress 的更多信息可以在以下链接中找到：

Playwright

段落标题 Playwright

Playwright 是一个针对现代网络应用的端到端测试框架。使用 JavaScript 或 TypeScript 中的 Playwright API 在所有现代渲染引擎(包括 Chromium、 WebKit 和 Firefox)上测试 Astro 代码。

安装

段落标题 安装

你可以使用 VS Code扩展 开始并运行你的测试。

或者，你可以使用你选择的包管理器在你的 Astro 项目中安装 Playwright。按照 CLI 步骤选择 JavaScript/TypeScript，命名测试文件夹，并添加一个可选的 GitHub Actions 工作流。

Terminal window
npm init playwright@latest

创建你的第一个 Playwright 测试

段落标题 创建你的第一个 Playwright 测试
  1. 选择要测试的页面，我们将使用下面的 index.astro 页面为例。
src/pages/index.astro
---
---
<html lang="en">
  <head>
    <title>Astro is awesome!</title>
    <meta name='description' content="Pull content from anywhere and serve it fast with Astro's next-gen island architecture." />
  </head>
  <body></body>
</html>

  1. 创建一个新文件夹并在 src/test 中添加以下测试文件。将下面的测试复制并粘贴到文件中，以验证页面元信息是否正确。更新页面 <title> 的值以匹配你正在测试的页面。

    src/test/index.spec.ts
    import { test, expect } from '@playwright/test';
    

    test('meta is correct', async ({ page }) => {
      await page.goto("http://localhost:4321/");
    

      await expect(page).toHaveTitle('Astro is awesome!');
    });

运行你的 Playwright 测试

段落标题 运行你的 Playwright 测试

你可以同时运行单个测试或多个测试，测试一个或多个浏览器。默认情况下，你的测试结果将显示在终端中。或者，你可以打开 HTML Test Reporter 以显示完整的报告和筛选测试结果。

  1. 若要使用命令行运行上面的测试示例，请使用 test 命令。可以选择，包含只运行单个测试的文件名:

    Terminal window
    npx playwright test index.spec.ts

  2. 若要查看完整的 HTML 测试报告，请使用以下命令打开该报告:

    Terminal window
    npx playwright show-report

进阶：在测试期间启动开发 Web 服务器

段落标题 进阶：在测试期间启动开发 Web 服务器

当你使用 Playwright 配置文件中的 webServer 选项运行测试脚本时，你也可以让 Playwright 启动服务器。

下面是使用 Yarn 时所需的配置和命令示例：

  1. 向项目根目录中的 package.json 文件添加一个测试脚本，例如 "test:e2e": "playwright test"。

  2. 在 playwright.config.ts 中，添加 webServer 对象并更改命令为 yarn preview。

playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  webServer: {
    command: 'yarn preview',
    url: 'http://localhost:4321/app/',
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://localhost:4321/app/',
  },
};
export default config;

  1. 执行 yarn build，然后执行 yarn test:e2e 运行 Playwright 测试。 下面是使用 npm 时所需的配置和命令示例：

  2. 向项目根目录中的 package.json 文件添加一个测试脚本，例如 "test:e2e": "playwright test"。

  3. 在 playwright.config.ts 中，添加 webServer 对象并更改命令为 npm run preview。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';
    

    export default defineConfig({
      webServer: {
        command: 'npm run preview',
        url: 'http://localhost:4321/',
        timeout: 120 * 1000,
        reuseExistingServer: !process.env.CI,
      },
      use: {
        baseURL: 'http://localhost:4321/',
      },
    });

  4. 执行 npm run build，然后执行 npm run test:e2e 去运行 Playwright 测试。

以下链接有更多关于 Playwright 的资料：