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

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

• Предотвращение регрессий: Гарантирует, что новые изменения не нарушат существующую функциональность.
• Повышение качества кода: Побуждает писать модульный и тестируемый код.
• Упрощение совместной работы: Предоставляет понятную документацию о том, как должны работать компоненты.

Для тестирования JavaScript, включая jQuery, Вам понадобится средство запуска тестов. Этот инструмент выполняет тесты и сообщает результаты.

Популярны два варианта:

• Jest: Современная многофункциональная платформа тестирования от Facebook, широко используемая для React, но подходящая для любого JS.
• QUnit: Платформа тестирования, специально разработанная для jQuery; она проще, но содержит меньше возможностей, чем Jest.

В этом уроке мы сосредоточимся на настройке Jest благодаря его широким возможностям и распространённости.

Перед установкой Jest Вам понадобится проект Node.js. Если у Вас его ещё нет, его легко создать.

Перейдите в каталог проекта в терминале и выполните:

Эта команда создаёт файл package.json, который управляет зависимостями и сценариями проекта.

Теперь установим Jest. Поскольку jQuery часто взаимодействует с DOM браузера (объектной моделью документа), нам также понадобится jest-environment-jsdom. JSDOM предоставляет в Node.js среду, похожую на браузер, поэтому код jQuery может изменять виртуальный DOM.

Установите их как зависимости для разработки:

Это добавит Jest и JSDOM в файл package.json.

Чтобы указать Jest использовать JSDOM, его необходимо настроить. Это можно сделать, добавив сценарий test в файл package.json или создав файл jest.config.js.

Вариант 1: в package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

Флаг --env=jsdom гарантирует, что Jest будет запускать тесты в среде JSDOM.

Jest ищет файлы тестов в каталоге __tests__ или файлы, имена которых заканчиваются на .test.js (или .spec.js). Создадим простой файл тестов.

Создайте каталог с именем __tests__ в корневом каталоге проекта, а затем добавьте файл, например __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe объединяет связанные тесты, а test (или it) определяет отдельный тестовый случай.

Чтобы тестировать код jQuery, необходимо импортировать сам jQuery в файл тестов. Установить jQuery можно через npm: npm install jquery.

Затем импортируйте его в файле тестов:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Утверждения позволяют проверить правильность работы кода. Jest использует функцию expect() в сочетании с сопоставителями для создания утверждений.

Вот простой пример на JavaScript (не связанный непосредственно с jQuery, но демонстрирующий утверждения):

Jest предлагает богатый набор сопоставителей. Вот несколько распространённых вариантов:

• .toBe(value): Проверяет точное равенство (как ===).
• .toEqual(value): Проверяет глубокое равенство объектов или массивов.
• .not.toBe(value): Проверяет неравенство.
• .toBeTruthy() / .toBeFalsy(): Проверяет истинность или ложность.
• .toContain(item): Проверяет, содержит ли массив или строка указанный элемент.

В jQuery их часто объединяют с методами jQuery, например: expect($element.text()).toBe('Expected Text');

После настройки файлов тестов их запуск не составит труда. Просто используйте сценарий, определённый в package.json:

Jest найдёт все файлы тестов, выполнит их в среде JSDOM и выведет результаты в терминал. Вы увидите, какие тесты пройдены, какие завершились с ошибкой, а также подробности всех ошибок.

Вы узнали, как настроить среду тестирования jQuery с помощью Jest и JSDOM. Какие из перечисленных команд и настроек необходимы для базовой конфигурации Jest с поддержкой DOM?

В этом уроке Вы узнали, как настроить надёжную среду тестирования приложений jQuery с помощью Jest.

• Мы инициализировали проект Node.js с помощью npm init.
• Установили Jest и jest-environment-jsdom для имитации среды браузера.
• Настроили Jest в файле package.json для использования JSDOM.
• Разобрались, как организовать файлы тестов, импортировать jQuery и писать основные утверждения с помощью сопоставителей Jest.

Эта основа позволяет писать эффективные тесты, обеспечивая надёжность и удобство поддержки кода jQuery.