Настройка среды тестирования

Для начала работы с Quasar необходимо установить Quasar CLI, который обеспечивает создание проектов, управление сборкой и запуском приложений. Установка выполняется через npm:

npm install -g @quasar/cli

После установки можно проверить корректность с помощью команды:

quasar --version

Quasar CLI интегрируется с Node.js и npm/yarn, поэтому важно убедиться, что версии Node.js соответствуют требованиям Quasar (рекомендуется LTS версия, например 18.x или 20.x).

Создание проекта Quasar

Проект создается командой:

quasar create my-project

В процессе инициализации предлагается выбор:

  • Менеджера пакетов: npm или yarn.
  • Подключение TypeScript: рекомендуется для крупных проектов.
  • Интеграция ESLint и Prettier: для поддержки чистоты кода.
  • Выбор стилей компонентов: CSS, SCSS, Stylus.
  • Выбор шаблона тестирования: Jest или Cypress.

После создания проекта структура директорий выглядит следующим образом:

my-project/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── boot/
│   └── assets/
├── public/
├── quasar.config.js
├── package.json
└── node_modules/

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

Настройка среды тестирования

Выбор фреймворка тестирования

Quasar поддерживает несколько решений для тестирования:

  • Jest – для unit и snapshot тестов компонентов.
  • Cypress – для end-to-end (E2E) тестирования.
  • Vitest – современная альтернатива Jest с высокой скоростью выполнения.

Выбор зависит от типа приложения и требований к покрытию тестами.

Интеграция Jest

Для интеграции Jest необходимо установить зависимости:

npm install --save-dev jest @vue/test-utils ts-jest vue-jest

Конфигурация Jest для проекта Quasar выполняется в файле jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'ts', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.ts$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
};

В jest.setup.js подключаются глобальные моки и настройки:

import { config } from '@vue/test-utils';
import 'jest-extended';

config.global.stubs = {
  transition: false,
  'router-link': true
};

Тесты создаются в папке tests/unit/ и именуются с расширением .spec.ts.

Пример unit-теста компонента:

import { mount } from '@vue/test-utils';
import MyButton from '@/components/MyButton.vue';

describe('MyButton.vue', () => {
  it('рендерит текст кнопки', () => {
    const wrapper = mount(MyButton, {
      props: { label: 'Click me' }
    });
    expect(wrapper.text()).toContain('Click me');
  });
});

Интеграция Cypress для E2E

Для полноценного end-to-end тестирования устанавливаются пакеты:

npm install --save-dev cypress @cypress/vue

Конфигурация Cypress хранится в cypress.config.ts:

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // дополнительные плагины и настройки
    },
    baseUrl: 'http://localhost:8080',
    supportFile: 'cypress/support/e2e.ts'
  },
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite'
    },
    specPattern: 'tests/e2e/**/*.cy.{js,ts,vue}'
  }
});

Пример простого E2E-теста:

describe('Главная страница', () => {
  it('проверяет заголовок', () => {
    cy.visit('/');
    cy.contains('Добро пожаловать в Quasar');
  });
});

Настройка среды запуска

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

quasar test --unit
quasar test --e2e

В конфигурации проекта можно настроить автоматический запуск тестов при сборке:

// quasar.config.js
module.exports = function (/* ctx */) {
  return {
    build: {
      env: {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      },
      extendWebpack(cfg) {
        // подключение дополнительных плагинов для тестов
      }
    },
    devServer: {
      open: true,
      watchOptions: {
        ignored: /node_modules/
      }
    }
  };
};

Настройка отчетности и покрытия

Для Jest подключается jest-coverage:

npm install --save-dev jest-coverage-badges

Команда генерации покрытия:

npx jest --coverage

Для Cypress можно использовать плагины для отчетности:

npm install --save-dev mochawesome

Конфигурация отчетов в cypress.config.ts:

reporter: 'mochawesome',
reporterOptions: {
  reportDir: 'cypress/reports',
  overwrite: false,
  html: true,
  json: true
}

Подключение Continuous Integration (CI)

Для CI/CD среды рекомендуется запускать тесты через GitHub Actions, GitLab CI или Jenkins. Пример для GitHub Actions:

name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm ci
      - run: quasar test --unit
      - run: quasar test --e2e

Эта конфигурация обеспечивает полное покрытие тестами при каждом коммите и pull request, что критически важно для крупных Quasar-проектов.

Настроенная среда тестирования обеспечивает единообразие процессов unit и E2E тестирования, интеграцию с CI/CD и гибкость расширений для больших проектов на Quasar.

Оглавление