Тестирование

Тестирование поможет вам писать и поддерживать работающий Astro код. Astro поддерживает множество популярных инструментов для юнит, компонентных и end-to-end тестов включая Jest, Mocha, Jasmine, Cypress и Playwright. Вы также можете установить библиотеки тестирования, специфичные для фреймворка, такие как React Testing Library, для тестирования ваших UI компонент.

Фреймворки тестирования позволяют вам указывать утверждения или ожидания того, как ваш код должен вести себя в конкретных ситуациях, а затем сравнивать их с фактическим поведением вашего кода.

Vitest

Нативный Vite фреймворк для юнит тестирования с поддержкой ESM, TypeScript и JSX на базе esbuild.

Посмотрите стартовый шаблон Astro + Vitest в GitHub.

Playwright

Playwright - фреймворк для end-to-end тестирования веб приложений. Используйте Playwright API в JavaScript или TypeScript для тестирования вашего Astro кода на всех современных движках для рендеринга включая Chromium, WebKit, и Firefox.

Установка

Вы можете начать и запускать ваши тесты, с помощью VS Code расширения.

В качестве альтернативы, вы можете установить Playwright в свой Astro проект используя пакетный менеджер по вашему выбору. Следуйте инструкциям CLI, чтобы выбрать JavaScript/TypeScript, назвать свою папку с тестами, и добавить необязательный рабочий процесс в GitHub Actions.

npm init playwright@latest

pnpm dlx 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 island architecture." />
  </head>
  <body></body>
</html>

Создайте новую папку и добавьте следующий тестовый файл в src/test. Скопируйте и вставьте следующий тест в файл, чтобы убедиться в правильности мета информации на странице. Обновите значение <title> на странице, чтобы оно соотвествовало странице, которую вы тестируете.

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 тестов

Вы можете запустить один или несколько тестов одновременно, тестируя несколько браузеров. По умолчанию, результаты ваших тестов будут показаны в терминале. При желании вы можете открыть HTML Test Reporter чтобы увидеть полный отчет и отфильтровать результаты тестирования.

Для запуска теста из нашего предыдущего примера используйте команду test в командной строке. Дополнительно, укажите название файла чтобы запустить только один тест:

npx playwright test index.spec.ts

Чтобы увидеть полный HTML Test Report, откройте его с помощью следующей команды:

npx playwright show-report

Дополнительно: Запуск веб сервера разработки во время тестов

Вы также можете запустить ваш сервер с помощью Playwright, при запуске вашего тестового скрипта используя опцию webServer в файле конфигурации Playwright.

Пример конфигурации и необходимых команд при использовании Yarn:

Добавьте скрипт теста, такой как "test:e2e": "playwright test" в ваш package.json файл в корне проекта.
В файле playwright.config.ts, добавьте объект webServer и обновите значение команды на yarn preview.

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;

Запустите yarn build, и затем yarn test:e2e чтобы запустить ваши Playwright тесты.

Более подробную информацию о Playwright можно найти по ссылкам ниже:

Создать проблему в GitHub

Отправить нам отзыв