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

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

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

Модульные и интеграционные тесты

Vitest

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

Используйте хелпер Astro getViteConfig() в вашем файле конфигурации vitest.config.ts, чтобы настроить Vitest с учётом настроек вашего проекта Astro:

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

export default getViteConfig({
  test: {
    // Параметры конфигурации Vitest
  },
});

По умолчанию getViteConfig() попытается загрузить файл конфигурации Astro в вашем проекте и применить его к тестовой среде. Начиная с Astro 4.8, если вам нужно настроить конфигурацию Astro, применяемую в ваших тестах, передайте второй аргумент в getViteConfig():

export default getViteConfig(
  { test: { /* Параметры конфигурации Vitest */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

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

Vitest и Container API

Добавлено в: astro@4.9.0

Вы можете нативно тестировать компоненты Astro, используя Container API (EN). Сначала настройте vitest, как описано выше, затем создайте файл .test.js для тестирования вашего компонента:

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

test('Карточка со слотами', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Содержание карточки',
    },
  });

  expect(result).toContain('Это карточка');
  expect(result).toContain('Содержание карточки');
});

Сквозные тесты

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="ru">
  <head>
    <title>Astro это потрясающе!</title>
    <meta name="description" content="Получайте контент из любой точки мира и быстро обслуживайте его благодаря архитектуре островков нового поколения Astro." />
  </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("http://localhost:4321/");

  await expect(page).toHaveTitle('Astro это потрясающе!');
});
```
Вы можете указать "baseURL": "http://localhost:4321" в файле конфигурации playwright.config.ts, чтобы использовать page.goto("/") вместо page.goto("http://localhost:4321/") для более удобного URL.

Запуск ваших Playwright тестов

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

Для запуска теста из нашего предыдущего примера используйте команду test в командной строке. Дополнительно, укажите название файла чтобы запустить только один тест:
Окно терминала
```
npx playwright test index.spec.ts
```
Чтобы увидеть полный HTML Test Report, откройте его с помощью следующей команды:
Окно терминала
```
npx playwright show-report
```

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

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

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

Добавьте скрипт теста, такой как "test:e2e": "playwright test" в ваш package.json файл в корне проекта.

В файле playwright.config.ts добавьте объект webServer и обновите значение команды на npm run preview.

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/',
  },
});

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

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

Cypress

Cypress — это инструмент для тестирования фронтенда, разработанный для современного веба. Cypress позволяет писать сквозные тесты для вашего сайта Astro.

Установка

Вы можете установить Cypress с помощью выбранного вами менеджера пакетов. Это позволит установить Cypress локально как зависимость dev для вашего проекта.

npm install -D cypress

pnpm add cypress --save-dev

yarn add cypress --dev

Конфигурация

В корне проекта создайте файл cypress.config.js со следующим содержимым:

import { defineConfig } from 'cypress'

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

Создайте свой первый Cypress тест

Выберите страницу для тестирования. В этом примере будет протестирована страница index.astro, приведённая ниже.

---
---
<html lang="ru">
  <head>
    <title>Astro это потрясающе!</title>
    <meta name="description" content="Получайте контент из любой точки мира и быстро обслуживайте его благодаря архитектуре островков нового поколения Astro." />
  </head>
  <body>
  <h1>Привет миру от Astro</h1>
  </body>
</html>

Создайте файл index.cy.js в папке cypress/e2e. Используйте следующий тест в файле, чтобы проверить правильность заголовка и шапки страницы.
cypress/e2e/index.cy.js
```
it('titles are correct', () => {
  const page = cy.visit('http://localhost:4321');

  page.get('title').should('have.text', 'Astro это потрясающе!')
  page.get('h1').should('have.text', 'Привет миру от Astro');
});
```
Вы можете установить [baseUrl: “http://localhost:4321”](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) в файле конфигурации cypress.config.js, чтобы использовать cy.visit(”/“)вместоcy.visit(“http://localhost:4321/”)` для более удобного URL.

Запуск ваших Cypress тестов

Cypress можно запустить из командной строки или из приложения Cypress. Приложение предоставляет визуальный интерфейс для запуска и отладки тестов.

Сначала запустите сервер разработки, чтобы Cypress мог получить доступ к вашему живому сайту.

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

npx cypress run

Чтобы запустить тест с помощью приложения Cypress, выполните следующую команду:

npx cypress open

После запуска приложения Cypress выберите E2E Testing, затем выберите браузер, который будет использоваться для запуска тестов.

По окончании тестирования вы должны увидеть зелёные галочки, подтверждающие, что тест пройден:

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

✓ titles are correct (107ms)

1 passing (1s)

Чтобы проверить, что ваш тест действительно работает, вы можете изменить следующую строку в файле index.astro:

 <body>
   <h1>Привет миру от Astro</h1>
   <h1>Привет от Astro</h1>
 </body>

Затем запустите тест снова. Вы должны увидеть красный символ «x» в выводе, сигнализирующий о том, что тест не удался.

Следующие шаги

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

NightwatchJS

Nightwatch.js — это фреймворк для автоматизации тестирования с мощным набором инструментов для написания, запуска и отладки тестов в Интернете со встроенной поддержкой всех основных браузеров и их мобильных аналогов, а также нативных мобильных приложений.

Установка

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

npm init nightwatch@latest

pnpm dlx create-nightwatch

yarn create nightwatch

Создайте свой первый Nightwatch тест

Выберите страницу для тестирования. В этом примере мы будет использовать страницу index.astro, приведённую ниже.

---
---
<html lang="ru">
  <head>
    <title>Astro это потрясающе!</title>
    <meta name="description" content="Получайте контент из любой точки мира и быстро обслуживайте его благодаря архитектуре островков нового поколения Astro." />
  </head>
  <body></body>
</html>

Создайте новую папку src/test/ и добавьте в нее следующий тестовый файл:
src/test/index.js
```
describe('Astro testing with Nightwatch', function () {
    before(browser => browser.navigateTo('http://localhost:4321/'));

    it("check that the title is correct", function (browser) {
        browser.assert.titleEquals('Astro это потрясающе!')
    });

    after(browser => browser.end());
});
```
Вы можете установить "baseURL": "http://localhost:4321" в файле конфигурации nightwatch.conf.js, чтобы использовать browser.navigateTo("/") вместо browser.navigateTo("http://localhost:4321/") для более удобного URL.

Запуск ваших NightwatchJS тестов

Вы можете запустить тесты с помощью расширения NightwatchJS для VS Code или используя приведённые ниже шаги CLI:

Чтобы запустить все тесты, введите в терминале следующую команду. В качестве опции укажите имя файла, чтобы запустить только один тест:
Окно терминала
```
npx nightwatch test/index.js
```
Кроме того, вы можете запускать тесты для конкретного браузера, используя аргумент CLI --environment или -e. Если нужный браузер не установлен, Nightwatch попытается настроить его для вас с помощью Selenium Manager:
Окно терминала
```
npx nightwatch test/index.ts -e firefox
```
Чтобы просмотреть полный отчёт о тестировании в формате HTML, откройте его с помощью следующей команды:
Окно терминала
```
npx nightwatch test/index.ts --open
```

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

Внести свой вклад Сообщество Sponsor