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

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

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

Vitest

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

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

import { getViteConfig } from 'astro/config';

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

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

Cypress

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

Установка

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

npm install -D cypress

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

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

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

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

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

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

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

Для запуска теста из нашего предыдущего примера используйте команду 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 можно найти по ссылкам ниже:

Внести свой вклад

Сообщество

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

Vitest

Cypress

Установка

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

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

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

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

NightwatchJS

Установка

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

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

Playwright

Установка

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

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

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

Что у вас на уме?

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

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

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