Пропустить до содержимого

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

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

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

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

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

vitest.config.ts
import { getViteConfig } from 'astro/config';
export default getViteConfig({
test: {
// Варианты конфигурации Vitest
},
});

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

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

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

Terminal window
npm install -D cypress

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

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

cypress.config.js
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
supportFile: false
}
})
  1. Выберите страницу для тестирования. В этом примере будет протестирована страница index.astro, приведённая ниже.

    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. Используйте следующий тест в файле, чтобы проверить правильность заголовка и шапки страницы.

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

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

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

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

Terminal window
npx cypress run

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

Terminal window
npx cypress open

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

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

Выходные данные при выполнении npx cypress
Running: index.cy.js (1 of 1)
titles are correct (107ms)
1 passing (1s)

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

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

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

Terminal window
npm init nightwatch@latest
  1. Выберите страницу для тестирования. В этом примере мы будет использовать страницу index.astro, приведённую ниже.

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

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

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

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

    Terminal window
    npx nightwatch test/index.js
  2. Чтобы просмотреть полный отчёт о тестировании в формате HTML, откройте его с помощью следующей команды:

    Terminal window
    npx nightwatch test/index.ts --open
  3. Чтобы запустить тесты для конкретного браузера, используйте аргумент --environment или -e CLI. Если у вас не установлен соответствующий браузер, Nightwatch попытается установить его для вас с помощью Selenium Manager.

    Terminal window
    npx nightwatch test/index.ts -e firefox

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

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

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

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

Terminal window
npm init playwright@latest
  1. Выберите страницу для тестирования. В этом примере мы будет использовать страницу index.astro, приведённую ниже.

    src/pages/index.astro
    ---
    ---
    <html lang="ru">
    <head>
    <title>Astro это потрясающе!</title>
    <meta name="description" content="Получайте контент из любой точки мира и быстро обслуживайте его благодаря островной архитектуре нового поколения Astro." />
    </head>
    <body></body>
    </html>
  2. Создайте новую папку и добавьте следующий тестовый файл в 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 это потрясающе!');
    });

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

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

    Terminal window
    npx playwright test index.spec.ts
  2. Чтобы увидеть полный HTML Test Report, откройте его с помощью следующей команды:

    Terminal window
    npx playwright show-report

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

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

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

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

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

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

    playwright.config.ts
    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/',
    },
    });
  3. Запустите npm run build, и затем npm run test:e2e, чтобы запустить ваши Playwright тесты.

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

Contribute

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

Community