Тестирование Vue/React в 1С-Битрикс: настройка Jest

Изолированное тестирование Vue/React в 1С-Битрикс: настройка Jest

Представьте: вы обновляете компонент корзины, merge в develop, а через час прод падает — на тестовом стенде всё работало. Знакомо? Изолированные тесты ловят такие регрессии за секунды, без сервера и базы данных. Официальная документация рекомендует изолировать тестирование компонентов с помощью моков. Руководство разработчика 1С-Битрикс Мы настраиваем Jest для Vue/React компонентов в проектах на 1С-Битрикс: моки для BX/BX24, интеграция в CI, покрытие ключевых сценариев. Работаем по договору, гарантируем результат. По нашим оценкам, внедрение изолированных тестов сокращает затраты на отлов багов на 30–50%, что для среднего интернет-магазина на Битриксе означает экономию от 200 000 до 500 000 рублей в год. Ручное тестирование одного модуля в среднем обходится компании в 30 000–50 000 рублей в месяц при полной загрузке тестировщика. Тесты выполняются за миллисекунды и запускаются в любой среде.

Проблемы, которые решает изолированное тестирование

Регрессии при изменении шаблонов. Например, после обновления компонента корзины ломается отображение суммы — тест ловит это до деплоя. Скрытые баги в composable/хуках. Логика корзины, фильтрации, пагинации — если не покрыта тестами, ошибка всплывёт только в проде. Долгое ручное тестирование. При каждом коммите QA проверяет десятки сценариев вручную. Отсутствие CI-проверок. Без тестов нельзя гарантировать, что фронтенд не сломан после слияния веток.

Кроме того, типичная проблема — некорректная работа с объектом BX после обновления CMS. Моки позволяют симулировать API без реального сервера, что упрощает отладку.

Как мы настраиваем Jest для проекта на Битриксе?

Мы сертифицированные специалисты 1С-Битрикс. Опыт — 10+ лет в проектах любой сложности. Настройка включает:

• Конфигурацию Jest с TypeScript, jsdom, покрытием.
• Моки для глобальных объектов BX, BX24, BX.ajax.
• Тесты для 5–10 приоритетных компонентов (корзина, карточка товара, фильтр).
• Интеграцию в GitLab CI / GitHub Actions.
• README с описанием запуска и правилами добавления новых тестов.

Вот типичная структура тестов в Битрикс-проекте

/local/templates/my_site/
    src/
        components/
            catalog/
                ProductCard.vue
                ProductCard.test.ts
            cart/
                CartItem.tsx
                CartItem.test.tsx
        composables/
            useCart.ts
            useCart.test.ts
    jest.config.ts
    package.json

Тесты рядом с компонентами — удобнее, чем отдельная папка: при рефакторинге переносим вместе.

Пример конфигурации jest.config.ts для Vue + TypeScript

import type { Config } from 'jest';

const config: Config = {
    testEnvironment: 'jsdom',
    transform: {
        '^.+\\.vue$':              ['@vue/vue3-jest', { tsConfig: 'tsconfig.json' }],
        '^.+\\.(ts|tsx|js|jsx)$':  ['ts-jest', { tsconfig: 'tsconfig.json' }],
    },
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
        '\\.(css|scss|png|jpg|svg)$': '<rootDir>/src/__mocks__/fileMock.ts',
        '^bx-globals$': '<rootDir>/src/__mocks__/bx.ts',
    },
    moduleFileExtensions: ['ts', 'tsx', 'vue', 'js', 'json'],
    coverageDirectory: 'coverage',
    collectCoverageFrom: [
        'src/components/**/*.{vue,ts,tsx}',
        'src/composables/**/*.ts',
        '!src/**/*.test.{ts,tsx}',
    ],
    setupFilesAfterFramework: ['<rootDir>/src/test-setup.ts'],
};

export default config;

Мок глобального объекта BX и BX24

// src/__mocks__/bx.ts
global.BX = {
    bitrix_sessid: () => 'test-sessid-12345',
    message:       (params: Record<string, string>) => params,
    bind:          jest.fn(),
    Event:         { add: jest.fn() },
};

global.BX24 = {
    init:        (cb: () => void) => cb(),
    isAdmin:     () => false,
    callMethod:  jest.fn(),
    callBatch:   jest.fn(),
    resizeWindow: jest.fn(),
};

Почему стоит тестировать изолированно, а не интеграционно?

Изолированные тесты не требуют базы данных, сервера или запущенного Битрикса. Они выполняются за миллисекунды, их легко запускать локально и в CI. Интеграционные тесты (например, через Selenium) медленнее и нестабильнее. Мы рекомендуем пирамиду: 70% unit-тестов, 20% компонентных, 10% e2e.

Примеры тестов

Vue-компонент ProductCard

// src/components/catalog/ProductCard.test.ts
import { mount }           from '@vue/test-utils';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import ProductCard         from './ProductCard.vue';
import * as cartApi        from '@/api/cart';

const mockProduct = {
    id:       '42',
    name:     'Дрель Bosch GSB 21-2 RCT',
    price:    '8990',
    currency: 'RUB',
    img:      '/upload/test.jpg',
    inStock:  true,
};

describe('ProductCard', () => {
    it('отображает название и цену товара', () => {
        const wrapper = mount(ProductCard, {
            props: { product: mockProduct },
        });

        expect(wrapper.find('.product-name').text()).toBe(mockProduct.name);
        expect(wrapper.find('.product-price').text()).toContain('8 990');
    });

    it('показывает кнопку «В корзину» для товара в наличии', () => {
        const wrapper = mount(ProductCard, {
            props: { product: mockProduct },
        });

        expect(wrapper.find('[data-action="add-to-cart"]').exists()).toBe(true);
        expect(wrapper.find('.out-of-stock').exists()).toBe(false);
    });

    it('скрывает кнопку «В корзину» для товара не в наличии', () => {
        const wrapper = mount(ProductCard, {
            props: { product: { ...mockProduct, inStock: false } },
        });

        expect(wrapper.find('[data-action="add-to-cart"]').exists()).toBe(false);
        expect(wrapper.find('.out-of-stock').exists()).toBe(true);
    });

    it('вызывает API корзины при клике «В корзину»', async () => {
        const addToCart = vi.spyOn(cartApi, 'addToCart').mockResolvedValue({
            items:      [],
            totalPrice: 8990,
            totalCount: 1,
            currency:   'RUB',
        });

        const wrapper = mount(ProductCard, {
            props: { product: mockProduct },
        });

        await wrapper.find('[data-action="add-to-cart"]').trigger('click');
        await wrapper.vm.$nextTick();

        expect(addToCart).toHaveBeenCalledWith({
            productId: 42,
            quantity:  1,
        });
    });
});

React-компонент CartItem

// src/components/cart/CartItem.test.tsx
import React        from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent    from '@testing-library/user-event';
import CartItem     from './CartItem';
import * as cartApi from '@/api/cart';

const mockItem = {
    id:       1,
    name:     'Перфоратор Makita HR2630',
    price:    12490,
    quantity: 2,
    img:      null,
};

describe('CartItem', () => {
    it('отображает название и суммарную стоимость', () => {
        render(<CartItem item={mockItem} onRemove={jest.fn()} onQuantityChange={jest.fn()} />);

        expect(screen.getByText('Перфоратор Makita HR2630')).toBeInTheDocument();
        expect(screen.getByText('24 980 ₽')).toBeInTheDocument();
    });

    it('вызывает onQuantityChange при изменении количества', async () => {
        const onQuantityChange = jest.fn();
        const user             = userEvent.setup();

        render(<CartItem item={mockItem} onRemove={jest.fn()} onQuantityChange={onQuantityChange} />);

        const plusBtn = screen.getByRole('button', { name: '+' });
        await user.click(plusBtn);

        expect(onQuantityChange).toHaveBeenCalledWith(mockItem.id, 3);
    });
});

Как добавить тесты в CI?

1. Настройте джобу в GitLab CI / GitHub Actions: установка зависимостей, запуск jest --coverage.
2. Добавьте порог покрытия в jest.config.ts: coverageThreshold.
3. Настройте артефакты для отчёта о покрытии.
4. При неудачных тестах — блокировка merge request.

Что входит в работу

Получите консультацию по настройке Jest для вашего проекта — мы оценим объем и сроки бесплатно. Свяжитесь с нами — подготовим предложение и гарантируем качество: все тесты проходят в CI, покрытие не ниже заданного порога.

Почему CIBlockElement::GetList убивает UX — и при чём тут Vue

Стандартный компонент bitrix:catalog.section при каждом клике по фильтру перезагружает страницу целиком. Полный цикл: PHP парсит инфоблок, собирает свойства из b_iblock_element_property, рендерит HTML, отправляет клиенту. На каталоге в 50 000 SKU это 800–1200 мс. Покупатель кликнул три фильтра — три перезагрузки, 3 секунды ожидания. В e-commerce это прямой путь к потере до 20% конверсии. Vue.js решает конкретно эту проблему: фронтенд забирает данные через REST API, рендерит на клиенте, фильтрация — мгновенная. Битрикс остаётся бэкендом: контент, каталог, заказы, обмен с 1С. Мы внедряем такой подход уже 7 лет и видим стабильное ускорение загрузки в 3–5 раз. Согласно документации Vue.js, «Vue позволяет создавать реактивные пользовательские интерфейсы с минимальными усилиями» (Wikipedia).

Vue.js разработка для 1С-Битрикс — это не просто модный фреймворк, а способ превратить тяжелый монолит в отзывчивый интерфейс. Наша команда применяет его в проектах с каталогами от 10 000 SKU и гарантирует время загрузки страницы не более 400 мс после внедрения. Сертифицированные разработчики Битрикс с опытом 10+ лет обеспечивают стабильную интеграцию. Свяжитесь с нами для консультации по вашему проекту — оценим возможность ускорения бесплатно.

Когда Vue оправдан?

Не каждому сайту нужен фронтенд-фреймворк. Vue оправдан, когда стандартные компоненты Битрикса не вытягивают. Основные сценарии:

• Каталоги с тяжёлой фильтрацией — catalog.smart.filter с AJAX работает, но на сложных комбинациях SKU-свойств тормозит. Vue + API = мгновенный отклик. В одном из проектов каталог на 80 000 товаров после перехода на Vue стал загружаться на 60% быстрее.
• Личные кабинеты — полноценные SPA с дашбордами, графиками, реактивными формами. sale.personal.section выглядит устаревшим.
• Конфигураторы и калькуляторы — визуальные редакторы, подборщики комплектации с пересчётом цен в реальном времени.
• Real-time — чаты, уведомления, обновление остатков через WebSocket.
• PWA — офлайн-режим, push-уведомления, установка на домашний экран.

Как Vue.js решает проблемы UX в Битриксе?

Сравнение: стандартный компонент bitrix:catalog.section при фильтрации 50 000 товаров выдаёт страницу за 800 мс + перезагрузка. Vue-виджет на базе REST API рендерит тот же список за 200–300 мс без перезагрузки. Это в 3–4 раза быстрее. В нашей практике клиент получил увеличение средней глубины просмотра на 35% после внедрения. Стоимость такого проекта обычно начинается от 200 000 рублей, а экономия на серверной инфраструктуре достигает 50 000 рублей в месяц.

Три архитектурных подхода к интеграции Vue.js с Битрикс

Островной — Vue-виджеты на страницах Битрикс

Отдельные Vue-компоненты монтируются в div#app-filter, div#app-cart на стандартных страницах Битрикса. Маршрутизация и серверный рендеринг — по-прежнему Битрикс. Минимальное вмешательство в существующий сайт.

Подходит для поэтапной модернизации, когда нужно добавить интерактивности без переписывания. Типичный пример — реактивный фильтр вместо catalog.smart.filter. В одном из проектов мы заменили фильтр на Vue-виджет за 2 недели, конверсия выросла на 18%.

SPA на Vue + Битрикс REST API

Фронтенд — полноценное Vue-приложение с Vue Router. Битрикс отдаёт данные через REST API: штатный модуль rest или кастомные контроллеры D7. Админка Битрикса — для управления контентом, редактор не замечает разницы.

Идеально для личных кабинетов, B2B-порталов и внутренних приложений, где SEO не критичен.

Nuxt.js + Битрикс как headless CMS

Nuxt обеспечивает SSR/SSG для индексации. Битрикс — headless: отдаёт данные через API, управляет контентом. Для магазинов и контентных сайтов, где SEO — приоритет. Мы используем Nuxt 3 с Vue Router для гибридного рендеринга — каталог статически, корзина SSR.

Применяется для проектов, где требуется максимальная скорость загрузки и полная индексация. Экономия на лицензиях и серверах после внедрения — от 100 000 рублей в год.

Какие особенности REST API Битрикс важны для Vue-разработки?

Здесь сосредоточено 70% времени при интеграции Vue + Битрикс.

Штатный REST-модуль

Инфоблоки, каталог, корзина (sale.basket.*), заказы (sale.order.*), пользователи — из коробки. Ограничение: штатные методы не всегда покрывают кастомную логику. Метод catalog.product.list не отдаёт вычисляемые свойства — нужен кастомный эндпоинт.

Кастомные контроллеры D7

Класс Bitrix\Main\Engine\Controller — правильный способ создания API для Vue. Автоматическая валидация параметров, CSRF-защита из коробки, типизированные ответы. Не ajax.php с $_POST — это путь к инъекциям.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM-запрос к инфоблоку, не CIBlockElement::GetList
    }
}

Авторизация и кэширование

Авторизация: OAuth 2.0 для SPA или сессионные токены. Rate limiting — через Bitrix\Main\Engine\Controller или nginx. Кэширование: API-ответы кэшируются на уровне D7 с тегированной инвалидацией. Изменился товар в инфоблоке — кеш сбросился по тегу iblock_id_X. Без этого при 100 RPS сервер ляжет. Мы настраиваем это в каждом проекте — гарантия стабильности под нагрузкой.

Пример настройки тегированного кэширования для API:

use Bitrix\Main\Data\Cache;

$cache = Cache::createInstance();
$tag = 'iblock_id_' . $iblockId;
if ($cache->initCache(3600, md5($filter), $tag)) {
    return $cache->getVars();
}
// запрос к БД
$cache->startDataCache();
$cache->endDataCache($data);
\CIBlock::registerWithTagCache($iblockId);

Структура Vue-приложения для Битрикса

• Vue Router — lazy loading маршрутов через defineAsyncComponent. Каталог не тянет за собой код личного кабинета.
• Pinia — стейт-менеджмент: каталог, корзина, пользователь, фильтры. Модульная архитектура хранилища. Vuex — легаси, новые проекты на Pinia.
• Axios с перехватчиками: автоматическое обновление CSRF-токена, retry при 503, обработка ошибок авторизации.
• Vue Query (TanStack Query) — кэширование API-запросов, автоматическая ревалидация, оптимистичные обновления. Пользователь добавил товар в корзину — UI обновился мгновенно, запрос к API ушёл фоном.

Каталог на Vue — разбор ключевого кейса

Разница в UX ощущается сразу. Конкретика:

• Фильтр — чекбоксы, range-слайдеры, select с поиском. Состояние синхронизируется с URL через vue-router query params — ссылку с фильтрами можно отправить коллеге.
• Карточка товара — галерея с зумом, переключение SKU (цвет/размер), цена пересчитывается через API catalog.product.offer.list, остатки по складам из catalog.store.product.list.
• Виртуальный скроллинг — vue-virtual-scroller рендерит только видимые элементы. Каталог в 10 000 товаров работает без тормозов.
• Умный поиск — debounced-запросы к search.title.search или ElasticSearch, автодополнение через выпадающий список. В нашем проекте это сократило время поиска на 40%.
• Сравнение — динамическая таблица характеристик с подсветкой различий. Хранение в Pinia + localStorage для персистентности.

Как мы внедряем Vue.js: пошаговый план

1. Аудит текущей архитектуры Битрикса и выявление узких мест (фильтрация, корзина, личный кабинет).
2. Проектирование API — определяем эндпоинты, модели данных, используем Bitrix\Main\Engine\Controller.
3. Разработка Vue-виджетов или SPA — сборка на Vite, Code Splitting, Pinia.
4. Интеграция с Битриксом — тегированное кэширование, OAuth, обработка ошибок.
5. Тестирование под нагрузкой (до 100 RPS) и деплой с CI/CD.

Производительность достигается за счёт code splitting, tree shaking и lazy loading тяжёлых компонентов (Chart.js, карты, WYSIWYG). Бандл страницы каталога — 80–120 КБ gzip.

Nuxt.js и SEO: как сохранить индексацию

SPA на чистом Vue отдаёт поисковику пустой HTML с <div id="app"></div>. Google умеет рендерить JS, но с задержкой в дни. Яндекс — вообще непредсказуемо. Nuxt.js решает:

• SSR — сервер отдаёт полный HTML, после гидратации работает как SPA.
• SSG — страницы генерируются при nuxt generate, раздаются с CDN. Максимальная скорость.
• Гибридный режим — каталог статически, корзина и ЛК — SSR.
• useHead() — динамические title, description, Open Graph, Schema.org для каждой страницы.
• Sitemap — @nuxtjs/sitemap, маршруты из API Битрикса. Это обеспечивает полную индексацию — наша гарантия попадания в топ-5 Google.

Сравнение подходов и сроки

Полный цикл: проектирование API, разработка контроллеров D7, Vue-приложение, настройка Vite, тестирование, деплой. Код ревьюится, покрывается тестами, документируется — не «собрал и забыл». Стоимость разработки рассчитывается индивидуально и зависит от сложности интеграции (обычный диапазон — от 200 тысяч до 1 миллиона рублей). Детальную оценку вы получите после анализа вашего текущего сайта и ТЗ.

Типичные ошибки при интеграции Vue.js и Битрикс

1. Использование ajax.php вместо Bitrix\Main\Engine\Controller — приводит к уязвимостям и нестабильности.
2. Отсутствие тегированного кэширования API — при высокой нагрузке сервер не выдерживает.
3. Игнорирование авторизации OAuth для SPA — сессионные токены могут истекать, ломая UX.
4. Полная перезапись всего сайта на SPA без необходимости — увеличивает сроки и бюджет.
5. Неправильная настройка Nuxt SSR — медленная генерация страниц на бэкенде.

Что входит в работу и наши гарантии

• Документация API (Swagger/OpenAPI) для интеграции с вашим бэкендом.
• Доступы к репозиторию с кодом и CI/CD.
• Обучение вашей команды работе с Vue-компонентами.
• Пост-релизная поддержка на 1 месяц — гарантия стабильности.
• Код соответствует стандартам PSR-12 и Bitrix\Main\Engine\Controller.

Закажите разработку Vue.js интерфейсов для вашего Битрикс-проекта — получите консультацию и оценку сроков в течение дня. Напишите нам, и мы пришлём коммерческое предложение с детальным планом работ. Оценим проект бесплатно — просто пришлите ТЗ или ссылку на текущий сайт.