Настройка окружения для E2E тестов на проекте с Symfony и Next.js в Docker

Настройка окружения для E2E тестирования на проекте с Symfony и Next.js в Docker требует создания изолированного тестового окружения с правильными переменными окружения. Для корректной работы необходимо поднять отдельный бэкенд с env=test и настроить Next.js на использование тестового режима через переменные окружения, чтобы Cypress мог корректно взаимодействовать с обоими сервисами в тестовом окружении.

Содержание

• Настройка Docker окружения для E2E тестирования
• Конфигурация Symfony для тестового окружения
• Настройка Next.js для тестового режима
• Интеграция Cypress с Docker окружением
• Управление переменными окружения в Docker Compose
• Автоматизация запуска E2E тестов

Настройка Docker окружения для E2E тестирования

Для создания корректного окружения E2E тестирования в Docker необходимо разработать отдельную конфигурацию, которая будет изолировать тестовые сервисы от окружения разработки. Основной проблемой является то, что в локальной разработке Symfony обычно работает в режиме dev, а для E2E тестов требуется режим test, аналогичный тому, что используется при запуске PHPUnit.

Решение состоит в создании отдельного файла docker-compose.test.yml, который будет определять тестовые сервисы. Это позволяет запускать тестовое окружение параллельно с окружением разработки, не мешая локальной работе. В тестовом окружении необходимо:

1. Создать отдельный контейнер для Symfony с переменной окружения APP_ENV=test
2. Настроить отдельную базу данных для тестов
3. Определить правильные порты для сервисов, чтобы избежать конфликтов с dev-окружением

# docker-compose.test.yml
version: '3.8'
services:
 php-test:
 build:
 context: .
 dockerfile: Dockerfile.test
 environment:
 - APP_ENV=test
 - DATABASE_URL=mysql://test_user:test_pass@db-test:3306/test_db
 volumes:
 - .:/var/www
 depends_on:
 - db-test

 db-test:
 image: mysql:8.0
 environment:
 - MYSQL_DATABASE=test_db
 - MYSQL_USER=test_user
 - MYSQL_PASSWORD=test_pass
 ports:
 - "3307:3306"

Такая конфигурация обеспечивает изоляцию тестового окружения, позволяя одновременно работать в dev-режиме и проводить E2E тесты.

Конфигурация Symfony для тестового окружения

Когда вы поднимаете отдельный бэкенд с env=test, Symfony автоматически активирует тестовое окружение, что обеспечивает несколько ключевых преимуществ для E2E тестирования:

1. Использование тестовой базы данных: Symfony автоматически переключится на конфигурацию базы данных, указанную для тестового окружения в config/packages/test/framework.yaml

2. Отключение кэширования: В тестовом окружении кэширование отключено, что предотвращает проблемы с устаревшими данными

3. Отладка выключена: Ошибки отображаются в более простом формате, подходящем для автоматизированных тестов

Для правильной настройки Symfony в тестовом окружении необходимо выполнить несколько шагов:

Сначала создайте конфигурационный файл для тестового окружения:

# config/packages/test/framework.yaml
framework:
 test: true
 session:
 storage_id: session.storage.mock_file
 profiler:
 collect: false

Затем настройте тестовую базу данных:

# config/packages/doctrine.yaml
doctrine:
 dbal:
 url: '%env(DATABASE_URL)%'

И добавьте переменную окружения в файл .env.test:

# .env.test
APP_ENV=test
DATABASE_URL=mysql://test_user:test_pass@db-test:3306/test_db

Важно отметить, что при использовании отдельного контейнера для тестового окружения, вам потребуется настроить миграции базы данных специально для тестов. Это можно сделать через консоль Symfony:

# Запуск миграций в тестовом окружении
docker-compose -f docker-compose.test.yml exec php-test bin/console doctrine:migrations:migrate --env=test

Такая настройка гарантирует, что ваши E2E тесты будут работать с чистой изолированной базой данных в тестовом окружении.

Настройка Next.js для тестового режима

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

Для правильной настройки Next.js в тестовом режиме необходимо:

1. Установить переменную окружения NODE_ENV=test: Это переключит Next.js в режим, оптимизированный для тестирования

2. Настроить baseUrl в Cypress: Укажите правильный URL для тестового окружения

3. Создать отдельную конфигурацию для тестов: Используйте next.config.js для настройки тестового окружения

Вот пример конфигурации для Next.js в тестовом окружении:

// next.config.js
module.exports = {
 // Базовая конфигурация
 experimental: {
 // Дополнительные настройки для тестов
 }
}

Для тестового окружения можно создать отдельный файл next.config.test.js:

// next.config.test.js
module.exports = {
 // Конфигурация специально для тестирования
 async rewrites() {
 return [
 {
 source: '/api/:path*',
 destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`
 }
 ]
 }
}

И настроить его использование в Docker:

# docker-compose.test.yml
nextjs-test:
 build:
 context: .
 dockerfile: Dockerfile.next.test
 environment:
 - NODE_ENV=test
 - NEXT_PUBLIC_API_URL=http://php-test:8000
 ports:
 - "3001:3000"

В Cypress конфигурации необходимо указать baseUrl для тестового окружения:

// cypress.config.js
module.exports = {
 e2e: {
 baseUrl: 'http://localhost:3001',
 setupNodeEvents(on, config) {
 // Настройки Cypress
 }
 }
}

Такая настройка гарантирует, что Next.js будет корректно взаимодействовать с тестовым бэкендом Symfony в Docker окружении.

Интеграция Cypress с Docker окружением

Cypress требует, чтобы тестируемое приложение было доступно по определенному URL, и для правильной работы в Docker окружении необходимо настроить несколько параметров:

1. Настройка baseUrl: Укажите правильный URL тестового окружения в Cypress конфигурации

2. Ожидание готовности сервисов: Добавьте команду для ожидания полной загрузки всех сервисов перед запуском тестов

3. Настройка переменных окружения: Используйте Cypress.env для доступа к переменным окружения Docker

Вот пример конфигурации Cypress:

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
 e2e: {
 baseUrl: 'http://localhost:3001',
 env: {
 apiUrl: 'http://localhost:8000'
 },
 setupNodeEvents(on, config) {
 on('before:browser:launch', (browser = {}, launchOptions) => {
 // Настройки для браузера
 return launchOptions;
 });
 
 on('task', {
 // Пользовательские задачи
 });
 },
 },
});

Для правильной работы с Docker окружением, добавьте команду ожидания готовности сервисов:

// cypress/support/e2e.js
Cypress.Commands.add('waitForServices', () => {
 // Ожидание готовности Next.js
 cy.request('http://localhost:3001').should((response) => {
 expect(response.status).to.eq(200);
 });
 
 // Ожидание готовности Symfony API
 cy.request('http://localhost:8000/api/health').should((response) => {
 expect(response.status).to.eq(200);
 });
});

В тестовом файле используйте эту команду перед началом тестов:

// cypress/e2e/sample.spec.js
describe('Sample E2E Test', () => {
 beforeEach(() => {
 cy.visit('/');
 cy.waitForServices();
 });
 
 it('should load homepage', () => {
 cy.contains('Welcome').should('be.visible');
 });
});

Для запуска Cypress в Docker окружении создайте отдельный контейнер:

# docker-compose.test.yml
cypress:
 build:
 context: .
 dockerfile: Dockerfile.cypress
 environment:
 - NEXT_PUBLIC_API_URL=http://php-test:8000
 depends_on:
 - nextjs-test
 - php-test

И Dockerfile для Cypress:

# Dockerfile.cypress
FROM cypress/included:13.6.1
WORKDIR /e2e
COPY . .

Такая настройка обеспечивает корректную работу Cypress с обоими сервисами в тестовом Docker окружении.

Управление переменными окружения в Docker Compose

Правильное управление переменными окружения является критически важным для E2E тестирования в Docker окружении. Необходимо разделить переменные для разработки и тестирования, а также обеспечить безопасную передачу чувствительных данных.

Основные принципы управления переменными окружения в Docker Compose для E2E тестирования:

1. Использование файлов окружения: Создайте отдельные файлы для dev и test окружений

2. Иерархия переменных: Определите переменные на разных уровнях (файлы, окружение, docker-compose)

3. Безопасность хранение: Используйте секреты для чувствительных данных

Вот пример структуры файлов окружения:

# .env
# Переменные для разработки
APP_ENV=dev
DATABASE_URL=mysql://user:pass@db:3306/mydb
NEXT_PUBLIC_API_URL=http://localhost:8000

# .env.test
# Переменные для тестирования
APP_ENV=test
DATABASE_URL=mysql://test_user:test_pass@db-test:3306/test_db
NEXT_PUBLIC_API_URL=http://localhost:8000

В Docker Compose для тестового окружения используйте эти переменные:

# docker-compose.test.yml
version: '3.8'
services:
 php-test:
 build:
 context: .
 dockerfile: Dockerfile.test
 environment:
 - APP_ENV=${APP_ENV:-test}
 - DATABASE_URL=${DATABASE_URL}
 - DATABASE_URL=${DATABASE_URL:-mysql://test_user:test_pass@db-test:3306/test_db}
 env_file:
 - .env.test

 nextjs-test:
 build:
 context: .
 dockerfile: Dockerfile.next.test
 environment:
 - NODE_ENV=test
 - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
 env_file:
 - .env.test

Для чувствительных данных используйте Docker secrets:

# docker-compose.test.yml
services:
 db-test:
 image: mysql:8.0
 secrets:
 - db_password
 environment:
 - MYSQL_ROOT_PASSWORD_FILE=/run/secrets/db_password

secrets:
 db_password:
 file: ./secrets/db_password.txt

Такая организация переменных окружения обеспечивает безопасность и гибкость при настройке E2E тестирования в Docker окружении.

Автоматизация запуска E2E тестов

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

Вот пример скрипта для автоматизации запуска E2E тестов:

#!/bin/bash
# scripts/run-e2e-tests.sh

set -e

echo "Starting E2E tests..."

# Запуск тестового окружения
echo "Starting test environment..."
docker-compose -f docker-compose.test.yml up -d

# Ожидание готовности сервисов
echo "Waiting for services to be ready..."
sleep 10

# Проверка доступности сервисов
echo "Checking service availability..."
curl -f http://localhost:3001 || exit 1
curl -f http://localhost:8000/api/health || exit 1

# Запуск Cypress тестов
echo "Running Cypress tests..."
docker-compose -f docker-compose.test.yml run --rm cypress

# Остановка тестового окружения
echo "Stopping test environment..."
docker-compose -f docker-compose.test.yml down

echo "E2E tests completed successfully!"

Для использования этого скрипта добавьте его в ваш проект и сделайте исполняемым:

chmod +x scripts/run-e2e-tests.sh

Также можно настроить интеграцию с CI/CD системами. Пример для GitHub Actions:

# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
 push:
 branches: [ main ]
 pull_request:
 branches: [ main ]

jobs:
 e2e-tests:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v3
 
 - name: Set up Docker Buildx
 uses: docker/setup-buildx-action@v2
 
 - name: Build Docker images
 run: |
 docker-compose -f docker-compose.test.yml build
 
 - name: Run E2E tests
 run: |
 ./scripts/run-e2e-tests.sh
 
 - name: Upload test results
 uses: actions/upload-artifact@v3
 if: always()
 with:
 name: test-results
 path: cypress/videos/

Для более сложных сценариев можно использовать Makefile:

# Makefile
.PHONY: test-e2e clean-e2e

test-e2e:
	@echo "Running E2E tests..."
	@docker-compose -f docker-compose.test.yml up -d
	@sleep 15
	@docker-compose -f docker-compose.test.yml run --rm cypress
	@docker-compose -f docker-compose.test.yml down
	@echo "E2E tests completed"

clean-e2e:
	@echo "Cleaning up E2E test environment..."
	@docker-compose -f docker-compose.test.yml down -v
	@docker system prune -f
	@echo "Cleanup completed"

Такая автоматизация обеспечивает воспроизводимость и удобство запуска E2E тестов в Docker окружении.

Источники

1. Next.js Testing Documentation — Официальная документация по интеграции Cypress с Next.js для E2E тестирования: https://nextjs.org/docs/app/guides/testing/cypress
2. Symfony Testing Guide — Руководство по тестированию в Symfony, включая настройку тестового окружения: https://symfony.com/doc/current/testing.html
3. Docker Compose Overview — Документация по Docker Compose для управления многоконтейнерными приложениями: https://docs.docker.com/compose/overview/
4. Cypress Testing Guide — Официальная документация Cypress по настройке тестирования веб-приложений: https://docs.cypress.io/guides/getting-started/testing-your-app.html

Заключение

Правильная настройка окружения для E2E тестирования на проекте с Symfony и Next.js в Docker требует создания изолированного тестового окружения через отдельный docker-compose.test.yml файл. Ключевые моменты включают:

• Необходимость поднять отдельный бэкенд с APP_ENV=test для корректной работы Symfony в тестовом режиме
• Настройку Next.js через NODE_ENV=test и правильную конфигурацию baseUrl в Cypress
• Управление переменными окружения через отдельные файлы (.env, .env.test) и Docker secrets
• Автоматизацию процесса запуска тестов с подготовкой и очисткой окружения

Такой подход обеспечивает изоляцию тестового окружения от разработки, что критически важно для получения достоверных результатов E2E тестирования. Использование Docker Compose с тестовыми сервисами позволяет параллельно работать в dev-режиме и проводить тесты, не мешая локальной разработке.