Typebiztonság elsajátítása a TypeScript tesztelésében: Útmutató a Jest integrációhoz

A szoftverfejlesztés folyamatosan fejlődő táján a kódminőség fenntartása és az alkalmazás megbízhatóságának biztosítása kiemelten fontos. A TypeScript, statikus típusú képességeivel, az egyik vezető választássá vált a robusztus és karbantartható alkalmazások építésében. A TypeScript előnyei azonban túlmutatnak a fejlesztési fázison; jelentősen befolyásolják a tesztelést. Ez az útmutató bemutatja, hogyan lehet a Jest-et, egy népszerű JavaScript tesztelési keretrendszert használni a típusbiztonság zökkenőmentes integrálásához a TypeScript tesztelési munkafolyamatában. Elmélyülünk a legjobb gyakorlatokban, gyakorlati példákban és stratégiákban az effektív és karbantartható tesztek írásához.

A típusbiztonság jelentősége a tesztelésben

A típusbiztonság alapvetően lehetővé teszi a fejlesztők számára, hogy a hibákat a fejlesztési folyamat során, nem pedig futásidőben fogják el. Ez különösen előnyös a tesztelésben, ahol a típusokkal kapcsolatos problémák korai felismerése jelentős hibakeresési erőfeszítéseket takaríthat meg később. A típusbiztonság tesztelésbe történő beépítése több kulcsfontosságú előnnyel jár:

• Korai hibafelismerés: A TypeScript típusellenőrző képességei lehetővé teszik a típuseltérések, helytelen argumentumtípusok és más típusokkal kapcsolatos hibák azonosítását a tesztek fordítása során, mielőtt futásidőbeli hibaként jelennének meg.
• Jobb kódkarbantartás: A típusannotációk élő dokumentációként szolgálnak, megkönnyítve a kód megértését és karbantartását. Amikor a teszteket típusellenőrzik, megerősítik ezeket az annotációkat és biztosítják a konzisztenciát a teljes kódbázisban.
• Továbbfejlesztett refaktorálási képességek: A refaktorálás biztonságosabbá és hatékonyabbá válik. A TypeScript típusellenőrzése segít biztosítani, hogy a változtatások ne vezessenek nem szándékolt következményekhez, vagy ne törjék meg a meglévő teszteket.
• Kevesebb hiba: A típusokkal kapcsolatos hibák korai felismerésével jelentősen csökkentheti a gyártásba kerülő hibák számát.
• Növekvő magabiztosság: A jól típusosított és jól tesztelt kód nagyobb magabiztosságot ad a fejlesztőknek az alkalmazás stabilitását és megbízhatóságát illetően.

A Jest beállítása TypeScript-tel

A Jest integrálása TypeScript-tel egy egyszerű folyamat. Íme egy lépésről lépésre útmutató:

1. Projekt inicializálása: Ha még nincs TypeScript projektje, kezdje azzal, hogy hozzon létre egyet. Inicializáljon egy új projektet npm vagy yarn használatával:

               npm init -y
   # vagy
   yarn init -y
               
   
                 
                   Copy
                 
               
             

2. TypeScript és Jest telepítése: Telepítse a szükséges csomagokat fejlesztői függőségként:

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

   • typescript: A TypeScript fordító.
   • jest: A tesztelési keretrendszer.
   • @types/jest: Típusdefiníciók a Jest-hez.
   • ts-jest: Egy TypeScript transzformer a Jest-hez, amely lehetővé teszi a TypeScript kód megértését.
3. TypeScript konfigurálása: Hozzon létre egy tsconfig.json fájlt a projekt gyökérkönyvtárában. Ez a fájl határozza meg a TypeScript fordító beállításait. Egy alapkonfiguráció így nézhet ki:

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

   Főbb beállítások:

   • target: Megadja a cél JavaScript verziót (pl. es5, es6, esnext).
   • module: Megadja a használt modulrendszert (pl. commonjs, esnext).
   • esModuleInterop: Engedélyezi az együttműködést a CommonJS és az ES modulok között.
   • forceConsistentCasingInFileNames: Kikényszeríti a fájlnevek következetes nagybetűs/kisbetűs használatát.
   • strict: Engedélyezi a szigorú típusellenőrzést. Ajánlott a jobb típusbiztonság érdekében.
   • skipLibCheck: Kihagyja a deklarációs fájlok (.d.ts) típusellenőrzését.
   • outDir: Megadja a lefordított JavaScript fájlok kimeneti könyvtárát.
   • include: Megadja a fordításba belefoglalandó fájlokat és könyvtárakat.
   • exclude: Megadja a fordításból kizárandó fájlokat és könyvtárakat.

4. Jest konfigurálása: Hozzon létre egy jest.config.js (vagy jest.config.ts) fájlt a projekt gyökérkönyvtárában. Ez a fájl konfigurálja a Jest-et. Egy alapkonfiguráció TypeScript támogatással így nézhet ki:

               /** @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': Megadja, hogy a ts-jest-et használjuk.
   • testEnvironment: Beállítja a tesztelési környezetet (pl. 'node', 'jsdom' böngészőhöz hasonló környezetekhez).
   • testMatch: Meghatározza a tesztfájlokhoz illeszkedő fájl mintákat.
   • transform: Meghatározza a használandó transzformert a fájlokhoz. Itt a ts-jest-et használjuk TypeScript fájlok transzformálására.
   • moduleNameMapper: Modulok aliásolására használják, különösen hasznos importálási útvonalak feloldásához, pl. olyan útvonalak használata, mint a `@/components` a hosszú relatív útvonalak helyett.
   • collectCoverage: Engedélyezi vagy letiltja a kódlefedettséget.
   • coverageDirectory: Beállítja a lefedettségi jelentések könyvtárát.
5. Tesztelés írása: Hozza létre a tesztfájlokat (pl. src/my-component.test.ts vagy src/__tests__/my-component.test.ts).
6. Tesztelés futtatása: Adjon hozzá egy teszt parancsot a package.json fájljához:

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

   Ezután futtassa a teszteket a következő paranccsal:

               npm test
   # vagy
   yarn test
               
   
                 
                   Copy
                 
               
             

Példa: Egy egyszerű függvény tesztelése

Készítsünk egy egyszerű példát a típusbiztos tesztelés demonstrálására. Vegyünk egy olyan függvényt, amely két számot ad össze:

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

            

              
                Copy
              
            
          

Most írjunk egy tesztet ehhez a függvényhez a Jest és a TypeScript használatával:

            // 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: A TypeScript ezt a hibát felismeri, ha kikommentelik
  // expect(add('2', 3)).toBe(5);
});

            

              
                Copy
              
            
          

Ebben a példában:

• Importáljuk az add függvényt.
• Tesztet írunk a Jest test és expect függvényeivel.
• A tesztek ellenőrzik a függvény viselkedését különböző bemenetekkel.
• A megjegyzett sor illusztrálja, hogyan fogja felismerni a TypeScript a típushibát, ha megpróbálnánk egy sztringet átadni az add függvénynek, így ez a hiba nem jut el futásidőbe. Az `//@ts-expect-error` megjegyzés azt mondja a TypeScript-nek, hogy hibára számítson azon a soron.

Haladó tesztelési technikák TypeScript-tel és Jest-tel

Miután az alapvető beállítás elkészült, felfedezhet további haladó tesztelési technikákat a tesztsorozat hatékonyságának és karbantarthatóságának növelése érdekében.

Mockolás és Spies

A mockolás lehetővé teszi a kódegységek izolálását külső függőségek helyettesítésével vezérelt helyettesítőkkel. A Jest beépített mockolási képességekkel rendelkezik.

Példa: Egy API-hívást végző függvény mockolása:

            // 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');
  // Process the data
  return data;
}

            

              
                Copy
              
            
          

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

jest.mock('./api'); // Mock the api module

test('processes data correctly', async () => {
  // @ts-ignore: Ignoráljuk a típushibát ehhez a teszthez
  fetchData.mockResolvedValue({ result: 'success' }); // Mock the resolved value

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

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

            

              
                Copy
              
            
          

Ebben a példában a fetchData függvényt mockoljuk az api.ts modulból. A mockResolvedValue-t használjuk egy sikeres API-válasz szimulálására, és ellenőrizzük, hogy a processData helyesen dolgozza fel a mockolt adatokat. A toHaveBeenCalledWith-t használjuk annak ellenőrzésére, hogy a `fetchData` függvényt a megfelelő argumentumokkal hívták-e meg.

Aszinkron kód tesztelése

Az aszinkron kód tesztelése kulcsfontosságú a modern JavaScript alkalmazásokhoz. A Jest többféle módot kínál az aszinkron tesztek kezelésére.

Példa: Egy setTimeout-ot használó függvény tesztelése:

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

Ebben a példában az async/await-et használjuk az aszinkron művelet kezelésére a teszten belül. A Jest támogatja a callback-ek és a promise-ek használatát is aszinkron tesztekhez.

Kódlefedettség

A kódlefedettségi jelentések értékes betekintést nyújtanak abba, hogy a kód mely részeit fedik le a tesztek. A Jest megkönnyíti a kódlefedettségi jelentések generálását.

A kódlefedettség engedélyezéséhez konfigurálja a collectCoverage és coverageDirectory opciókat a jest.config.js fájljában. Ezt követően a teszteket lefedettséggel futtathatja.

            // jest.config.js
module.exports = {
  // ... other configurations
  collectCoverage: true,
  coverageDirectory: 'coverage',
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'], // Specify files to collect coverage from
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

            

              
                Copy
              
            
          

A collectCoverageFrom opció lehetővé teszi a lefedettséghez figyelembe veendő fájlok megadását. A coverageThreshold opció lehetővé teszi a minimális lefedettségi százalékok beállítását. Miután futtatta a teszteket, a Jest generál egy lefedettségi jelentést a megadott könyvtárban.

Megtekintheti a lefedettségi jelentést HTML formátumban a részletes betekintésekhez.

Tesztvezérelt fejlesztés (TDD) TypeScript-tel és Jest-tel

A Tesztvezérelt Fejlesztés (TDD) egy szoftverfejlesztési folyamat, amely a tényleges kód megírása előtt a tesztek írását hangsúlyozza. A TDD rendkívül hatékony gyakorlat lehet, ami robusztusabb és jobban megtervezett kódhoz vezet. A TypeScript és a Jest segítségével a TDD folyamat egyszerűsített.

1. Írjon egy hibás tesztet: Kezdje egy olyan teszt megírásával, amely leírja a kívánt viselkedést a kódjával kapcsolatban. A teszt eleinte hibás lesz, mert a kód még nem létezik.
2. Írja meg a minimális kódot a teszt átadásához: Írja meg a legegyszerűbb lehetséges kódot, amely átadja a tesztet. Ez magában foglalhat egy nagyon alapvető implementációt.
3. Refaktorálás: Miután a teszt átadta, refaktorálja a kódot a tervezés és az olvashatóság javítása érdekében, miközben biztosítja, hogy minden teszt továbbra is átadja.
4. Ismétlés: Ismételje meg ezt a ciklust minden új funkció vagy képesség esetén.

Példa: Használjuk a TDD-t egy olyan függvény létrehozásához, amely nagybetűssé teszi egy sztring első betűjét:

1. Hibás teszt:

            // 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. Minimális kód az átadáshoz:

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

            

              
                Copy
              
            
          

3. Refaktorálás (ha szükséges): Ebben az egyszerű esetben a kód már viszonylag tiszta. További teszteket adhatunk hozzá más él esetek lefedésére.

            // src/string-utils.test.ts (expanded)
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
              
            
          

A TypeScript-tel végzett TDD biztosítja, hogy a kezdetektől fogva teszteket írjon, azonnali előnyöket biztosítva a típusbiztonságból, hogy megvédjen a hibáktól.

A típusbiztos tesztelés legjobb gyakorlatai

A Jest és a TypeScript segítségével végzett típusbiztos tesztelés előnyeinek maximalizálása érdekében vegye figyelembe ezeket a legjobb gyakorlatokat:

• Írjon átfogó teszteket: Biztosítsa, hogy a tesztjei fedjék le a kód összes különböző útvonalát és él esetét. Törekedjen magas kódlefedettségre.
• Használjon leíró tesztneveket: Írjon világos és leíró tesztneveket, amelyek elmagyarázzák az egyes tesztek célját.
• Használja ki a típusannotációkat: Használjon bőségesen típusannotációkat a tesztekben az olvashatóság javítása és a típusokkal kapcsolatos hibák korai felismerése érdekében.
• Megfelelően mockoljon: Használjon mockolást a kódegységek izolálására és azok önálló tesztelésére. Kerülje a túl sok mockolást, ami a teszteket kevésbé valósághűvé teheti.
• Tesztelje hatékonyan az aszinkron kódot: Használja megfelelően az async/await vagy a promise-eket, amikor aszinkron kódot tesztel.
• Kövesse a TDD alapelveit: Fontolja meg a TDD elfogadását a fejlesztési folyamat vezetéséhez, és biztosítsa, hogy a kódot megelőzően teszteket írjon.
• Tartsa fenn a tesztelhetőséget: Tervezze meg kódját tesztelhetőségre gondolva. Tartsa a függvényeit és moduljait fókuszáltan, világos bemenetekkel és kimenetekkel.
• Tekintse át a tesztkódot: Ugyanúgy, ahogy a gyártási kódot is áttekinti, rendszeresen tekintse át a tesztkódot, hogy biztosítsa annak karbantarthatóságát, hatékonyságát és naprakészségét. Fontolja meg a tesztkód minőségellenőrzését a CI/CD folyamatokon belül.
• Tartsa naprakészen a teszteket: Amikor módosításokat végez a kódján, frissítse a teszteket is ennek megfelelően. Az elavult tesztek hamis pozitív eredményeket okozhatnak, és csökkenthetik a tesztsorozat értékét.
• Integrálja a teszteket a CI/CD-be: Integrálja a teszteket a Folyamatos Integrációs és Folyamatos Szállítási (CI/CD) folyamatba az automatizált teszteléshez és a problémák korai felismeréséhez a fejlesztési ciklusban. Ez különösen hasznos globális fejlesztői csapatok számára, ahol a kódváltozások több időzónán és helyen is történhetnek.

Gyakori buktatók és hibaelhárítás

Bár a Jest és a TypeScript integrálása általában egyszerű, néhány gyakori problémával találkozhat. Íme néhány tipp a hibaelhárításhoz:

• Típushibák a tesztekben: Ha típusa hibákat lát a tesztjeiben, gondosan vizsgálja meg a hibaüzeneteket. Ezek az üzenetek gyakran rámutatnak a probléma pontos kód sorára. Ellenőrizze, hogy a típusok megfelelően vannak-e definiálva, és hogy a függvényeknek a megfelelő argumentumokat adja át.
• Helytelen importálási útvonalak: Biztosítsa, hogy az importálási útvonalak helyesek legyenek, különösen modul aliások használata esetén. Dupla ellenőrizze a tsconfig.json és a Jest konfigurációját.
• Jest konfigurációs problémák: Gondosan tekintse át a jest.config.js fájlt, hogy biztosítsa annak helyes konfigurációját. Ügyeljen a preset, transform és testMatch opciókra.
• Elavult függőségek: Győződjön meg arról, hogy az összes függősége (TypeScript, Jest, ts-jest és típusdefiníciók) naprakészek.
• Tesztelési környezet eltérései: Ha olyan kódot tesztel, amely egy adott környezetben fut (pl. egy böngésző), győződjön meg arról, hogy a Jest tesztkörnyezete megfelelően van konfigurálva (pl. jsdom használatával).
• Mockolási problémák: Dupla ellenőrizze a mockolási konfigurációját. Győződjön meg arról, hogy a mockok megfelelően vannak beállítva, mielőtt a tesztek futnak. Használja megfelelően a mockResolvedValue, mockRejectedValue és más mockolási módszereket.
• Aszinkron teszt problémák: Aszinkron kód tesztelésekor győződjön meg arról, hogy a tesztek megfelelően kezelik a promise-eket, vagy használják az async/await-et.

Következtetés

A Jest integrálása TypeScript-tel a típusbiztos teszteléshez rendkívül hatékony stratégia a kódminőség javítására, a hibák csökkentésére és a fejlesztési folyamat felgyorsítására. A jelen útmutatóban ismertetett legjobb gyakorlatok és technikák követésével robusztus és karbantartható teszteket építhet, amelyek hozzájárulnak az alkalmazásai általános megbízhatóságához. Ne felejtse el folyamatosan finomítani a tesztelési megközelítését, és alkalmazkodni a projektje specifikus igényeihez.

A tesztelésben a típusbiztonság elfogadása nem csak a hibák elkapásáról szól; magabiztosságot épít a kódbázisban, elősegíti az együttműködést a globális csapaton belül, és végső soron jobb szoftvert szállít. A TDD elvei, a TypeScript és a Jest erejével kombinálva, erőteljes alapot kínálnak egy hatékonyabb és eredményesebb szoftverfejlesztési életciklushoz. Ez gyorsabb piacra kerülést eredményezhet termékének bármely régióban, és megkönnyíti a szoftver karbantartását élettartama során.

A típusbiztonságos tesztelést minden nemzetközi csapat számára a modern szoftverfejlesztési gyakorlatok elengedhetetlen részének kell tekinteni. A tesztelésbe fektetett összeg a termék minőségébe és hosszú élettartamába történő befektetés.