הגדרת Jest לבדיקות רכיבי Vue/React מבודדים ב-1C-Bitrix

הגדרת Jest לרכיבי Vue/React מבודדים בפרויקטים של 1C-Bitrix

תארו לעצמכם: אתם מעדכנים רכיב עגלת קניות, ממזגים ל-develop, ושעה לאחר מכן הייצור קורס—אבל סביבת הבדיקות עבדה מצוין. נשמע מוכר? בדיקות מבודדות תופסות רגרסיות כאלה תוך שניות, ללא שרת או מסד נתונים. התיעוד הרשמי ממליץ לבודד בדיקות רכיבים באמצעות mocks. מדריך המפתחים של 1С-Bitrix אנו מגדירים Jest לרכיבי Vue/React בפרויקטים של 1C-Bitrix: mocks עבור BX/BX24, אינטגרציית CI, כיסוי תרחישים מרכזיים. אנו עובדים בחוזה ומבטיחים תוצאות. לפי ההערכות שלנו, הכנסת בדיקות מבודדות מפחיתה את עלויות גילוי הבאגים ב-30–50%, מה שעבור חנות מקוונת ממוצעת של Bitrix משמעותו חיסכון של $2k–5k בשנה. בדיקות ידניות של מודול אחד עולות בדרך כלל לחברה $300–500 בחודש עם מהנדס QA במשרה מלאה. הבדיקות רצות במילישניות וניתנות להרצה בכל סביבה. ההשקעה בהקמת בדיקות כאלה היא בדרך כלל סביב $900–1.3k, ומוחזרת במהירות על ידי מניעת רגרסיות.

בעיות שבדיקות מבודדות פותרות

• רגרסיות כאשר תבניות משתנות. לדוגמה, לאחר עדכון רכיב עגלת הקניות, תצוגת הסכום הכולל נשברת—הבדיקה תופסת זאת לפני הפריסה.
• באגים נסתרים ב-composables/hooks. לוגיקת עגלה, סינון, פגינציה—אם לא מכוסים בבדיקות, השגיאה צצה רק בייצור.
• בדיקות ידניות איטיות. עם כל commit, ה-QA בודק ידנית עשרות תרחישים.
• אין בדיקות CI. ללא בדיקות, אי אפשר להבטיח שהפרונטאנד לא נשבר לאחר מיזוג ענפים.

בנוסף, בעיה אופיינית היא עבודה לא נכונה עם אובייקט BX לאחר עדכון CMS. Mocks מאפשרים לדמות את ה-API ללא שרת אמיתי, מה שמפשט את הניפוי.

כיצד אנו מגדירים Jest לפרויקט Bitrix

אנחנו מומחי 1C-Bitrix מוסמכים עם 10+ שנים בשוק ולמעלה מ-50 פרויקטים מוצלחים. ההגדרה כוללת:

• הגדרת Jest עם TypeScript, jsdom, כיסוי.
• Mocks עבור אובייקטים גלובליים BX, BX24, BX.ajax.
• בדיקות ל-5–10 רכיבים בעדיפות גבוהה (עגלת קניות, כרטיס מוצר, פילטר).
• אינטגרציה עם GitLab CI / GitHub Actions.
• README עם הוראות הרצה וכללים להוספת בדיקות חדשות.

מבנה בדיקה טיפוסי בפרויקט Bitrix

/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;

Mock של אובייקטי 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(),
};

למה לבדוק מבודד ולא אינטגרטיבי?

בדיקות מבודדות לא צריכות מסד נתונים, שרת או Bitrix רץ. הן רצות במילישניות—יתרון מהירות פי 1000 על פני בדיקות אינטגרציה שלוקחות דקות—וקלות להרצה מקומית וב-CI. בדיקות אינטגרציה (למשל, דרך Selenium) איטיות יותר ופחות יציבות. אנו ממליצים על הפירמידה: 70% בדיקות יחידה, 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. הגדירו job ב-GitLab CI / GitHub Actions: התקנת תלויות, הרצת /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 .
2. הוסיפו סף כיסוי ב-jest.config.ts: 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; .
3. הגדירו artifacts לדוח הכיסוי.
4. בבדיקות שנכשלו—חסמו את בקשת המיזוג.

מה כלול בעבודה

קבלו ייעוץ על הגדרת Jest לפרויקט שלכם—נעריך את ההיקף ואת לוח הזמנים. צרו קשר—נכין הצעה ונבטיח איכות: כל הבדיקות עוברות ב-CI, הכיסוי עומד בסף שנקבע.