TypeScript testlarida tur xavfsizligini mukammallashtirish: Jest integratsiyasi bo'yicha qo'llanma

Dasturiy ta'minotni ishlab chiqishning doimiy o'zgaruvchan landshaftida kod sifatini saqlash va ilova ishonchliligini ta'minlash muhim ahamiyatga ega. TypeScript o'zining statik turlash imkoniyatlari bilan kuchli va qulay ilovalarni yaratish uchun yetakchi tanlovga aylandi. Biroq, TypeScriptning afzalliklari faqat ishlab chiqish bosqichidan tashqarida emas; ular testlashga sezilarli ta'sir ko'rsatadi. Ushbu qo'llanma Jest, mashhur JavaScript test doirasini, TypeScript test ish jarayoniga tur xavfsizligini uzluksiz integratsiya qilishni qanday qo'llashni o'rganadi. Biz samarali va qulay testlarni yozish uchun eng yaxshi amaliyotlar, amaliy misollar va strategiyalarni ko'rib chiqamiz.

Testlashda tur xavfsizligining ahamiyati

Tur xavfsizligi, mohiyatan, dasturchilarga xatolarni dastur ishga tushganda emas, balki ishlab chiqish jarayonida aniqlash imkonini beradi. Bu testlashda ayniqsa foydali bo'lib, turga oid muammolarni erta aniqlash keyinchalik katta tuzatish ishlarining oldini oladi. Testlashga tur xavfsizligini kiritish bir qancha asosiy afzalliklarni beradi:

• Xatolarni erta aniqlash: TypeScript'ning tur tekshiruvi imkoniyatlari test kompilyatsiyasi paytida, dastur ishga tushganda nosozliklar yuzaga kelmasdan oldin, tur nomuvofiqliklari, noto'g'ri argument turlari va boshqa turga oid xatolarni aniqlash imkonini beradi.
• Kodning saqlanishini yaxshilash: Tur annotatsiyalari jonli hujjat vazifasini o'taydi, bu sizning kodingizni tushunish va saqlashni osonlashtiradi. Testlar tur tekshiruvidan o'tkazilganda, ular ushbu annotatsiyalarni mustahkamlaydi va kodingiz bo'ylab izchillikni ta'minlaydi.
• Refaktorlash imkoniyatlarini oshirish: Refaktorlash xavfsizroq va samaraliroq bo'ladi. TypeScript'ning tur tekshiruvi o'zgarishlar kutilmagan oqibatlarga olib kelmasligini yoki mavjud testlarni buzmasligini ta'minlashga yordam beradi.
• Kamaytirilgan xatolar: Turga oid xatolarni erta aniqlash orqali, siz ishlab chiqarishga yetib boradigan xatolar sonini sezilarli darajada kamaytirishingiz mumkin.
• Ishonchni oshirish: Yaxshi turlangan va yaxshi testlangan kod dasturchilarga o'z ilovalarining barqarorligi va ishonchliligiga bo'lgan ishonchni oshiradi.

Jestni TypeScript bilan sozlash

Jestni TypeScript bilan integratsiya qilish oddiy jarayondir. Mana bosqichma-bosqich qo'llanma:

1. Loyihani ishga tushirish: Agar sizda hali TypeScript loyihasi bo'lmasa, uni yaratishdan boshlang. Npm yoki yarn yordamida yangi loyihani ishga tushiring:

               npm init -y
   # or
   yarn init -y
               
   
                 
                   Copy
                 
               
             

2. TypeScript va Jestni o'rnatish: Kerakli paketlarni ishlab chiqish bog'liqliklari sifatida o'rnating:

               npm install --save-dev typescript jest @types/jest ts-jest
   # or
   yarn add --dev typescript jest @types/jest ts-jest
               
   
                 
                   Copy
                 
               
             

   • typescript: TypeScript kompilyatori.
   • jest: Testlash doirasi.
   • @types/jest: Jest uchun tur ta'riflari.
   • ts-jest: Jest uchun TypeScript transformeri bo'lib, unga TypeScript kodini tushunish imkonini beradi.
3. TypeScriptni sozlash: Loyihangizning asosiy katalogida tsconfig.json faylini yarating. Ushbu fayl TypeScript uchun kompilyator parametrlarini belgilaydi. Asosiy konfiguratsiya quyidagicha ko'rinishga ega bo'lishi mumkin:

               {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "esModuleInterop": true,
       "forceConsistentCasingInFileNames": true,
       "strict": true,
       "skipLibCheck": true,
       "outDir": "./dist"
     },
     "include": ["src/**/*", "test/**/*"],
     "exclude": ["node_modules"]
   }
   
               
   
                 
                   Copy
                 
               
             

   Asosiy sozlamalar:

   • target: Maqsadli JavaScript versiyasini belgilaydi (masalan, es5, es6, esnext).
   • module: Ishlatiladigan modul tizimini belgilaydi (masalan, commonjs, esnext).
   • esModuleInterop: CommonJS va ES modullari o'rtasida o'zaro ishlashni yoqadi.
   • forceConsistentCasingInFileNames: Fayl nomlarining izchil harf o'lchamini talab qiladi.
   • strict: Qattiq tur tekshiruvini yoqadi. Tur xavfsizligini yaxshilash uchun tavsiya etiladi.
   • skipLibCheck: Deklaratsiya fayllarining (.d.ts) tur tekshiruvini o'tkazib yuboradi.
   • outDir: Kompilyatsiya qilingan JavaScript fayllari uchun chiqish katalogini belgilaydi.
   • include: Kompilyatsiyaga kiritiladigan fayllar va kataloglarni belgilaydi.
   • exclude: Kompilyatsiyadan chiqariladigan fayllar va kataloglarni belgilaydi.

4. Jestni sozlash: Loyihangizning asosiy katalogida jest.config.js (yoki jest.config.ts) faylini yarating. Ushbu fayl Jestni sozlaydi. TypeScriptni qo'llab-quvvatlaydigan asosiy konfiguratsiya quyidagicha ko'rinishga ega bo'lishi mumkin:

               /** @type {import('ts-jest').JestConfigWithTsJest} */
   module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'node',
     testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
     transform: {
       '^.+\\(ts|tsx)?$': 'ts-jest',
     },
     moduleNameMapper: {
       '^@/(.*)$': '/src/$1',
     },
     collectCoverage: false,
     coverageDirectory: 'coverage',
   };
   
               
   
                 
                   Copy
                 
               
             

   • preset: 'ts-jest': ts-jestdan foydalanayotganimizni bildiradi.
   • testEnvironment: Testlash muhitini belgilaydi (masalan, 'node', brauzerga o'xshash muhitlar uchun 'jsdom').
   • testMatch: Test fayllarini moslashtirish uchun fayl namunalarini belgilaydi.
   • transform: Fayllar uchun ishlatiladigan transformerni belgilaydi. Bu yerda biz TypeScript fayllarini transformatsiya qilish uchun ts-jestdan foydalanamiz.
   • moduleNameMapper: Modullarni taxalluslash uchun ishlatiladi, ayniqsa import yo'llarini hal qilishda yordam beradi, masalan, uzoq nisbiy yo'llar o'rniga `@/components` kabi yo'llarni ishlatish.
   • collectCoverage: Kod qamrovini yoqadi yoki o'chiradi.
   • coverageDirectory: Qamrov hisobotlari uchun katalogani belgilaydi.
5. Testlarni yozish: Test fayllaringizni yarating (masalan, src/my-component.test.ts yoki src/__tests__/my-component.test.ts).
6. Testlarni ishga tushirish: package.json faylingizga test skriptini qo'shing:

               "scripts": {
       "test": "jest"
     }
   
               
   
                 
                   Copy
                 
               
             

   So'ngra, testlaringizni quyidagicha ishga tushiring:

               npm test
   # or
   yarn test
               
   
                 
                   Copy
                 
               
             

Misol: Oddiy funksiyani testlash

Tur-xavfsiz testlashni namoyish qilish uchun oddiy misol yarataylik. Ikki sonni qo'shadigan funksiyani ko'rib chiqing:

            // src/math.ts
export function add(a: number, b: number): number {
  return a + b;
}

            

              
                Copy
              
            
          

Endi, ushbu funksiya uchun Jest va TypeScript yordamida test yozamiz:

            // src/math.test.ts
import { add } from './math';

test('adds two numbers correctly', () => {
  expect(add(2, 3)).toBe(5);
  expect(add(-1, 1)).toBe(0);
  expect(add(0, 0)).toBe(0);
});

test('handles non-numeric input (incorrectly)', () => {
  // @ts-expect-error: Agar izohdan chiqarilsa, TypeScript bu xatoni ushlaydi
  // expect(add('2', 3)).toBe(5);
});

            

              
                Copy
              
            
          

Ushbu misolda:

• Biz add funksiyasini import qilamiz.
• Biz Jest'ning test va expect funksiyalaridan foydalanib test yozamiz.
• Testlar funksiyaning turli xil kirishlar bilan ishlashini tekshiradi.
• Izohlangan qator, agar biz add funksiyasiga string o'tkazishga uringanimizda, TypeScript tur xatosini qanday ushlaganini ko'rsatadi va bu xato dastur ishga tushgunga qadar yetib borishining oldini oladi. `//@ts-expect-error` izohi TypeScriptga shu qatorda xato kutishni aytadi.

TypeScript va Jest bilan ilg'or testlash texnikalari

Asosiy sozlashni tugatgandan so'ng, test to'plamingiz samaradorligi va saqlanishini oshirish uchun yanada ilg'or testlash texnikalarini o'rganishingiz mumkin.

Mocking va Kuzatuvchilar

Mocking kod bo'laklarini tashqi bog'liqliklarni nazorat qilinadigan o'rnini bosuvchilar bilan almashtirish orqali ajratish imkonini beradi. Jest o'rnatilgan mocking imkoniyatlarini taqdim etadi.

Misol: API chaqiruvini amalga oshiradigan funksiyani mocking qilish:

            // src/api.ts
export async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

// src/my-component.ts
import { fetchData } from './api';

export async function processData() {
  const data = await fetchData('https://example.com/api/data');
  // Ma'lumotlarni qayta ishlash
  return data;
}

            

              
                Copy
              
            
          

            // src/my-component.test.ts
import { processData } from './my-component';
import { fetchData } from './api';

jest.mock('./api'); // api modulini mocking qilish

test('processes data correctly', async () => {
  // @ts-ignore: Ushbu test uchun tur xatosini e'tiborsiz qoldirish
  fetchData.mockResolvedValue({"result": "success"}); // Hal qilingan qiymatni mocking qilish

  const result = await processData();
  expect(result).toEqual({"result": "success"});

  expect(fetchData).toHaveBeenCalledWith('https://example.com/api/data');
});

            

              
                Copy
              
            
          

Ushbu misolda, biz api.ts modulidan fetchData funksiyasini mocking qilamiz. Biz muvaffaqiyatli API javobini simulyatsiya qilish va processData mocking qilingan ma'lumotlarni to'g'ri boshqarishini tekshirish uchun mockResolvedValue dan foydalanamiz. Biz `fetchData` funksiyasi to'g'ri argumentlar bilan chaqirilganligini tekshirish uchun toHaveBeenCalledWith dan foydalanamiz.

Asinxron kodni testlash

Asinxron kodni testlash zamonaviy JavaScript ilovalari uchun hal qiluvchi ahamiyatga ega. Jest asinxron testlarni boshqarishning bir necha usullarini taqdim etadi.

Misol: setTimeout dan foydalanadigan funksiyani testlash:

            // src/async.ts
export function delayedGreeting(name: string, delay: number): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Hello, ${name}!`);
    }, delay);
  });
}

            

              
                Copy
              
            
          

            // src/async.test.ts
import { delayedGreeting } from './async';

test('greets with a delay', async () => {
  const greeting = await delayedGreeting('World', 100);
  expect(greeting).toBe('Hello, World!');
});

            

              
                Copy
              
            
          

Ushbu misolda, biz test ichidagi asinxron operatsiyani boshqarish uchun async/await dan foydalanamiz. Jest, shuningdek, asinxron testlar uchun callbacklar va promiselardan foydalanishni qo'llab-quvvatlaydi.

Kod qamrovi

Kod qamrovi hisobotlari kodingizning qaysi qismlari testlar bilan qoplanganligi haqida qimmatli ma'lumot beradi. Jest kod qamrovi hisobotlarini yaratishni osonlashtiradi.

Kod qamrovini yoqish uchun jest.config.js faylingizdagi collectCoverage va coverageDirectory parametrlarini sozlang. Keyin testlaringizni qamrov yoqilgan holda ishga tushirishingiz mumkin.

            // jest.config.js
module.exports = {
  // ...boshqa konfiguratsiyalar
  collectCoverage: true,
  coverageDirectory: 'coverage',
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'], // Qamrovni yig'ish uchun fayllarni belgilang
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

            

              
                Copy
              
            
          

collectCoverageFrom opsiyasi qaysi fayllar qamrov uchun hisobga olinishi kerakligini belgilash imkonini beradi. coverageThreshold opsiyasi minimal qamrov foizlarini o'rnatish imkonini beradi. Testlaringizni ishga tushirganingizdan so'ng, Jest belgilangan katalogda qamrov hisobotini yaratadi.

Qamrov hisobotini batafsil ma'lumotlar uchun HTML formatda ko'rishingiz mumkin.

TypeScript va Jest bilan Testga asoslangan rivojlantirish (TDD)

Testga asoslangan rivojlantirish (TDD) – bu haqiqiy kodni yozishdan oldin testlarni yozishni ta'kidlaydigan dasturiy ta'minotni ishlab chiqish jarayoni. TDD juda samarali amaliyot bo'lishi mumkin, bu esa yanada mustahkam va yaxshi ishlab chiqilgan kodga olib keladi. TypeScript va Jest bilan TDD jarayoni soddalashtiriladi.

1. Muvaffaqiyatsiz test yozish: Kodingizning kerakli xatti-harakatini tavsiflovchi testni yozishdan boshlang. Kod hali mavjud bo'lmagani uchun test dastlab muvaffaqiyatsiz bo'lishi kerak.
2. Testni o'tkazish uchun minimal kod yozish: Testni o'tkazadigan eng oddiy kodni yozing. Bu juda asosiy amalga oshirishni o'z ichiga olishi mumkin.
3. Refaktorlash: Test o'tgandan so'ng, kodingizni dizaynini va o'qilishini yaxshilash uchun refaktor qiling, shu bilan birga barcha testlar hali ham o'tishini ta'minlang.
4. Takrorlash: Har bir yangi funksiya yoki funksionallik uchun ushbu siklni takrorlang.

Misol: TDD dan foydalanib, satrning birinchi harfini katta harfga aylantiradigan funksiyani yaratamiz:

1. Muvaffaqiyatsiz test:

            // src/string-utils.test.ts
import { capitalizeFirstLetter } from './string-utils';

test('capitalizes the first letter of a string', () => {
  expect(capitalizeFirstLetter('hello')).toBe('Hello');
});

            

              
                Copy
              
            
          

2. O'tish uchun minimal kod:

            // src/string-utils.ts
export function capitalizeFirstLetter(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

            

              
                Copy
              
            
          

3. Refaktorlash (agar kerak bo'lsa): Bu oddiy holatda, kod allaqachon nisbatan toza. Boshqa ekstremal holatlarni qoplash uchun ko'proq testlar qo'shishimiz mumkin.

            // src/string-utils.test.ts (kengaytirilgan)
import { capitalizeFirstLetter } from './string-utils';

test('capitalizes the first letter of a string', () => {
  expect(capitalizeFirstLetter('hello')).toBe('Hello');
  expect(capitalizeFirstLetter('world')).toBe('World');
  expect(capitalizeFirstLetter('')).toBe('');
  expect(capitalizeFirstLetter('123test')).toBe('123test');
});

            

              
                Copy
              
            
          

TypeScript bilan TDD sizni dastlabdan testlar yozishga undaydi, bu esa xatolardan himoya qilish uchun tur xavfsizligining tezkor foydalarini beradi.

Tur-xavfsiz testlash uchun eng yaxshi amaliyotlar

Jest va TypeScript bilan tur-xavfsiz testlashning afzalliklarini maksimal darajada oshirish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

• Keng qamrovli testlar yozish: Testlaringiz kodning barcha turli yo'llarini va ekstremal holatlarini qamrab olishini ta'minlang. Yuqori kod qamroviga intiling.
• Tavsiflovchi test nomlaridan foydalanish: Har bir testning maqsadini tushuntiruvchi aniq va tavsiflovchi test nomlarini yozing.
• Tur annotatsiyalaridan foydalanish: O'qiluvchanlikni yaxshilash va turga oid xatolarni erta aniqlash uchun testlaringizda tur annotatsiyalaridan keng foydalaning.
• To'g'ri mocking qilish: Kod bo'laklarini ajratish va ularni mustaqil test qilish uchun mockingdan foydalaning. Haddan tashqari mocking qilishdan saqlaning, bu testlarni kamroq realistik qilishi mumkin.
• Asinxron kodni samarali test qilish: Asinxron kodni test qilayotganda async/await yoki promiselardan to'g'ri foydalaning.
• TDD tamoyillariga rioya qilish: Ishlab chiqish jarayoningizni boshqarish va kod yozishdan oldin testlar yozishingizni ta'minlash uchun TDDni qabul qilishni ko'rib chiqing.
• Testlanuvchanlikni saqlash: Kodingizni testlanuvchanlikni hisobga olgan holda loyihalashtiring. Funksiyalaringiz va modullaringizni aniq kirish va chiqishlar bilan markazlashtirilgan holda saqlang.
• Test kodini ko'rib chiqish: Xuddi ishlab chiqarish kodini ko'rib chiqqaningiz kabi, test kodingizni ham muntazam ravishda ko'rib chiqing, uning saqlanishi, samaradorligi va dolzarbligini ta'minlang. CI/CD quvurlaringizda test kodi sifati tekshiruvlarini ko'rib chiqing.
• Testlarni dolzarb saqlash: Kodingizga o'zgarishlar kiritganingizda, testlaringizni shunga mos ravishda yangilang. Eskirgan testlar noto'g'ri musbat natijalarga olib kelishi va test to'plamingizning qiymatini pasaytirishi mumkin.
• Testlarni CI/CD ga integratsiya qilish: Testlarni avtomatlashtirish va ishlab chiqish siklining boshida muammolarni aniqlash uchun testlaringizni Uzluksiz Integratsiya va Uzluksiz Yetkazib Berish (CI/CD) quvuriga integratsiya qiling. Bu ayniqsa global ishlab chiqish jamoalari uchun foydalidir, chunki kod o'zgarishlari bir nechta vaqt zonalarida va joylashuvlarda amalga oshirilishi mumkin.

Tez-tez uchraydigan xatolar va muammolarni bartaraf etish

Jest va TypeScriptni integratsiya qilish odatda oddiy bo'lsa-da, ba'zi keng tarqalgan muammolarga duch kelishingiz mumkin. Mana, muammolarni bartaraf etishga yordam beradigan ba'zi maslahatlar:

• Testlardagi tur xatolari: Agar testlaringizda tur xatolarini ko'rsangiz, xato xabarlarini diqqat bilan o'rganing. Bu xabarlar ko'pincha muammo yuzaga kelgan kod qatoriga ishora qiladi. Turlaringiz to'g'ri aniqlanganligini va funksiyalarga to'g'ri argumentlarni o'tkazayotganingizni tekshiring.
• Noto'g'ri import yo'llari: Import yo'llaringiz to'g'ri ekanligiga ishonch hosil qiling, ayniqsa modul taxalluslaridan foydalanayotganda. tsconfig.json va Jest konfiguratsiyangizni ikki marta tekshiring.
• Jest konfiguratsiya muammolari: jest.config.js faylingizni to'g'ri sozlangani uchun diqqat bilan ko'rib chiqing. preset, transform va testMatch parametrlariga e'tibor bering.
• Eskirgan bog'liqliklar: Barcha bog'liqliklaringiz (TypeScript, Jest, ts-jest va tur ta'riflari) dolzarb ekanligiga ishonch hosil qiling.
• Test muhiti nomuvofiqliklari: Agar siz ma'lum bir muhitda (masalan, brauzer) ishlaydigan kodni test qilayotgan bo'lsangiz, Jest test muhitingiz to'g'ri sozlangani (masalan, jsdom yordamida) tekshiring.
• Mocking muammolari: Mocking konfiguratsiyangizni ikki marta tekshiring. Testlaringiz ishga tushishidan oldin mocklar to'g'ri sozlangani ishonch hosil qiling. mockResolvedValue, mockRejectedValue va boshqa mocking usullaridan to'g'ri foydalaning.
• Asinxron test muammolari: Asinxron kodni test qilayotganda, testlaringiz promiselarni to'g'ri boshqarishini yoki async/await dan foydalanishini ta'minlang.

Xulosa

Jestni TypeScript bilan tur-xavfsiz testlash uchun integratsiya qilish kod sifatini yaxshilash, xatolarni kamaytirish va ishlab chiqish jarayonini tezlashtirish uchun juda samarali strategiyadir. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlar va texnikalarga rioya qilish orqali siz ilovalaringizning umumiy ishonchliligiga hissa qo'shadigan kuchli va qulay testlarni yaratishingiz mumkin. Testlash yondashuvingizni doimiy ravishda takomillashtirishni va uni loyihangizning o'ziga xos ehtiyojlariga moslashtirishni unutmang.

Testlashda tur xavfsizligini qabul qilish faqat xatolarni aniqlashdan iborat emas; bu sizning kodingizga ishonch hosil qilish, global jamoangiz ichida hamkorlikni rivojlantirish va pirovardida yaxshiroq dasturiy ta'minotni yetkazib berishdir. TDD tamoyillari, TypeScript va Jestning qudrati bilan birgalikda, yanada samarali va samarali dasturiy ta'minotni ishlab chiqish sikli uchun kuchli asosni taqdim etadi. Bu dunyoning istalgan mintaqasida mahsulotingizni bozorga tezroq chiqarishga va dasturiy ta'minotingizni ishlash muddati davomida saqlashni osonlashtirishga olib kelishi mumkin.

Tur-xavfsiz testlash barcha xalqaro jamoalar uchun zamonaviy dasturiy ta'minotni ishlab chiqish amaliyotining muhim qismi hisoblanishi kerak. Testlashga kiritilgan sarmoya mahsulotingiz sifati va uzoq umr ko'rishiga kiritilgan sarmoyadir.