import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro'

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

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

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

Vitest

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

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

js
// vitest.config.ts/// <reference types="vitest" />import { getViteConfig } from 'astro/config';export default getViteConfig({  test: {    // Параметры конфигурации Vitest  },});

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

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

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

Vitest и Container API

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

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.

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

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

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

```jsx title="src/test/index.spec.ts" "Astro это потрясающе!" import { test, expect } from '@playwright/test'; test('meta is correct', async ({ page }) => { await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro это потрясающе!'); }); ``` :::tip[Укажите baseurl] Вы можете указать [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) в файле конфигурации `playwright.config.ts`, чтобы использовать `page.goto("/")` вместо `page.goto("http://localhost:4321/")` для более удобного URL. :::

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

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

```sh npx playwright test index.spec.ts ```

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

```sh npx playwright show-report ```

:::tip Проводите тестирование на продакшен-коде, чтобы оно было ближе к вашему живому, развёрнутому сайту. :::

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

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

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

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

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

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

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

Cypress

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

Установка

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

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

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

js
import { defineConfig } from 'cypress'export default defineConfig({  e2e: {    supportFile: false  }})

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

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

2. Создайте файл index.cy.js в папке cypress/e2e. Используйте следующий тест в файле, чтобы проверить правильность заголовка и шапки страницы.

```js title="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'); }); ``` :::tip[Установите `baseUrl`] Вы можете установить [``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 мог получить доступ к вашему живому сайту.

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

shell
npx cypress run

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

shell
npx cypress open

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

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

shell
Running:  index.cy.js                                                                     (1 of 1)✓ titles are correct (107ms)1 passing (1s)

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

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

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

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

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

NightwatchJS

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

Установка

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

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

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

2. Создайте новую папку src/test/ и добавьте в нее следующий тестовый файл:

```js title="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()); }); ``` :::tip[Установите `baseUrl`.] Вы можете установить [`"baseURL": "http://localhost:4321"`](https://nightwatchjs.org/guide/reference/settings.html#setting-the-baseurl-property) в файле конфигурации `nightwatch.conf.js`, чтобы использовать `browser.navigateTo("/")` вместо `browser.navigateTo("http://localhost:4321/")` для более удобного URL. :::

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

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

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

```sh npx nightwatch test/index.js ``` Кроме того, вы можете запускать тесты для конкретного браузера, используя аргумент CLI `--environment` или `-e`. Если нужный браузер не установлен, Nightwatch попытается настроить его для вас с помощью [Selenium Manager](https://www.selenium.dev/blog/2022/introducing-selenium-manager/): ```sh npx nightwatch test/index.ts -e firefox ```

2. Чтобы просмотреть полный отчёт о тестировании в формате HTML, откройте его с помощью следующей команды:

```sh npx nightwatch test/index.ts --open ```

:::tip Проводите тестирование на продакшен-коде, чтобы оно было ближе к вашему живому, развёрнутому сайту. :::

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

Курсы Astro