测试

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

测试框架允许你对代码在特定情况下的行为进行断言或期望，然后将这些与当前代码的实际行为进行比较。

单元和集成测试

Vitest

一个由 esbuild 驱动的原生 Vite 单元测试框架，支持 ESM、TypeScript 和 JSX。

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

/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Vitest configuration options
  },
});

默认情况下，getViteConfig() 将尝试加载你项目中的 Astro 配置文件，并将其应用于测试环境。从 Astro 4.8 开始，如果你需要自定义在测试中应用的 Astro 配置，请向 getViteConfig() 传递第二个参数。

export default getViteConfig(
  { test: { /* Vitest configuration options */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

查看 GitHub 上的 Astro + Vitest 入门模板。

Vitest 和容器 API

新增于： astro@4.9.0

你可以使用容器 API 原生测试 Astro 组件。首先，按照上述说明设置 vitest，然后创建一个 .test.js 文件来测试你的组件。

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Card content',
    },
  });

  expect(result).toContain('This is a card');
  expect(result).toContain('Card content');
});

端到端测试

Playwright

Playwright 是一个用于现代 Web 应用程序的端到端测试框架。在 JavaScript 或 TypeScript 中使用 Playwright API，可以在所有现代渲染引擎（包括 Chromium、WebKit 和 Firefox）上测试你的 Astro 代码。

安装

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

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

npm init playwright@latest

pnpm create playwright

yarn create playwright

创建你的第一个 Playwright 测试

选择一个页面进行测试。本例将测试下面的示例页面 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 islands architecture." />
  </head>
  <body></body>
</html>

创建一个新文件夹，并在 src/test 中添加以下测试文件。将以下测试复制并粘贴到文件中，以验证页面的元信息是否正确。更新页面 <title> 的值以匹配你正在测试的页面。
src/test/index.spec.ts
```
import { test, expect } from '@playwright/test';

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

  await expect(page).toHaveTitle('Astro is awesome!');
});
```
你可以在 playwright.config.ts 配置文件中设置 "baseURL": "https://:4321"，这样就可以使用 page.goto("/") 而不是 page.goto("https://:4321/")，以获得更方便的 URL。

运行你的 Playwright 测试

你可以一次运行单个测试或多个测试，测试一个或多个浏览器。默认情况下，你的测试结果将显示在终端中。你也可以选择打开 HTML 测试报告器来显示完整的报告并筛选测试结果。

要使用命令行运行我们上一个示例中的测试，请使用 test 命令。你也可以选择性地包含文件名以仅运行单个测试。
终端窗口
```
npx playwright test index.spec.ts
```
要查看完整的 HTML 测试报告，请使用以下命令打开它。
终端窗口
```
npx playwright show-report
```

高级：在测试期间启动开发 Web 服务器

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

以下是使用 npm 时所需的配置和命令示例。

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

在 playwright.config.ts 中，添加 webServer 对象并将 command 值更新为 npm run preview。

import { defineConfig } from '@playwright/test';

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

运行 npm run build，然后运行 npm run test:e2e 来运行 Playwright 测试。

有关 Playwright 的更多信息，请参阅以下链接。

Cypress

Cypress 是一个为现代网络构建的前端测试工具。Cypress 使你能够为你的 Astro 网站编写端到端测试。

安装

你可以使用你选择的包管理器安装 Cypress。这将在本地将 Cypress 安装为项目的开发依赖项。

npm install cypress --save-dev

pnpm add --save-dev cypress

yarn add cypress --dev

配置

在你的项目根目录中，创建一个包含以下内容的 cypress.config.js 文件。

import { defineConfig } from 'cypress'

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

创建你的第一个 Cypress 测试

选择一个页面进行测试。本例将测试下面的示例页面 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 islands architecture." />
  </head>
  <body>
  <h1>Hello world from Astro</h1>
  </body>
</html>

在 cypress/e2e 文件夹中创建一个 index.cy.js 文件。使用文件中的以下测试来验证页面标题和头部是否正确。
cypress/e2e/index.cy.js
```
it('titles are correct', () => {
  const page = cy.visit('https://:4321');

  page.get('title').should('have.text', 'Astro is awesome!')
  page.get('h1').should('have.text', 'Hello world from Astro');
});
```
你可以在 cypress.config.js 配置文件中设置 "baseUrl": "https://:4321"，这样就可以使用 cy.visit("/") 而不是 cy.visit("https://:4321/")，以获得更方便的 URL。

运行你的 Cypress 测试

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

首先，启动开发服务器，以便 Cypress 可以访问你的实时站点。

要使用命令行运行我们上一个示例中的测试，请执行以下命令。

npx cypress run

或者，要使用 Cypress App 运行测试，请执行以下命令。

npx cypress open

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

测试运行完成后，你应该在输出中看到绿色的勾号，确认你的测试已通过。

Running:  index.cy.js                                                                     (1 of 1)

✓ titles are correct (107ms)

1 passing (1s)

为了检查你的测试是否真的有效，你可以更改 index.astro 文件中的以下行。

 <body>
   <h1>Hello world from Astro</h1>
   <h1>Hello from Astro</h1>
 </body>

然后再次运行测试。你应该在输出中看到一个红色的“x”，确认你的测试失败了。

下一步

有关 Cypress 的更多信息，请参阅以下链接。

NightwatchJS

Nightwatch.js 是一个测试自动化框架，提供了一套强大的工具，用于在 Web 上编写、运行和调试你的测试，内置支持所有主流浏览器及其移动端版本，以及原生移动应用程序。

安装

你可以使用你选择的包管理器在你的 Astro 项目中安装 NightwatchJS。按照 CLI 步骤选择 JavaScript/TypeScript，命名你的测试文件夹，并选择是否包括组件测试和在移动浏览器上进行测试。

npm init nightwatch@latest

pnpm create nightwatch

yarn create nightwatch

创建你的第一个 Nightwatch 测试

选择一个页面进行测试。本例将测试下面的示例页面 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 islands architecture." />
  </head>
  <body></body>
</html>

创建一个新文件夹 src/test/ 并添加以下测试文件。

describe('Astro testing with Nightwatch', function () {
    before(browser => browser.navigateTo('https://:4321/'));

    it("check that the title is correct", function (browser) {
        browser.assert.titleEquals('Astro is awesome!')
    });

    after(browser => browser.end());
});

运行你的 NightwatchJS 测试

你可以使用 NightwatchJS VSCode 扩展或使用下面的 CLI 步骤来运行测试。

要运行所有测试，请在终端中输入以下命令。你也可以选择性地包含文件名以仅运行单个测试。
终端窗口
```
npx nightwatch test/index.js
```
此外，你可以使用 --environment 或 -e CLI 参数针对特定浏览器运行测试。如果你没有安装相关浏览器，Nightwatch 会尝试使用 Selenium Manager 为你进行设置。
终端窗口
```
npx nightwatch test/index.ts -e firefox
```
要查看完整的 HTML 测试报告，请使用以下命令打开它。
终端窗口
```
npx nightwatch test/index.ts --open
```

有关 NightwatchJS 的更多信息，请参阅以下链接。

贡献社区赞助