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

Ізольоване тестування Vue/React в 1С-Бітрікс: налаштування Jest

Уявіть: ви оновлюєте компонент кошика, merge в develop, а через годину продакшн падає — на тестовому стенді все працювало. Знайомо? Ізольовані тести ловлять такі регресії за секунди, без сервера та бази даних. Офіційна документація рекомендує ізолювати тестування компонентів за допомогою моків. Керівництво розробника 1С-Бітрікс Ми налаштовуємо Jest для Vue/React компонентів у проектах на 1С-Бітрікс: моки для BX/BX24, інтеграція в CI, покриття ключових сценаріїв. Працюємо за договором, гарантуємо результат. За нашими оцінками, впровадження ізольованих тестів скорочує витрати на вилов багів на 30–50%, що для середнього інтернет-магазину на Бітріксі означає економію від $2k–5kів на рік. Ручне тестування одного модуля в середньому обходиться компанії в $300–500ів на місяць при повному завантаженні тестувальника. Тести виконуються за мілісекунди та запускаються в будь-якому середовищі.

Проблеми, які вирішує ізольоване тестування

Регресії при зміні шаблонів. Наприклад, після оновлення компонента кошика ламається відображення суми — тест ловить це до деплою. Приховані баги в 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: 'USD', 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: 'USD', }); 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('$220–320')).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, покриття не нижче заданого порогу.