React Komponentų Testavimas: Išsamus Vadovas apie Izoliuotą Vienetinį Testavimą

Šiuolaikinės žiniatinklio kūrimo pasaulyje labai svarbu kurti patikimas ir lengvai prižiūrimas programas. React, pirmaujanti JavaScript biblioteka vartotojo sąsajoms kurti, leidžia kūrėjams sukurti dinamiškas ir interaktyvias žiniatinklio patirtis. Tačiau React programų sudėtingumas reikalauja išsamios testavimo strategijos, siekiant užtikrinti kodo kokybę ir išvengti regresijų. Šis vadovas skirtas esminiam React testavimo aspektui: izoliuotam vienetiniam testavimui.

Kas yra Izoliuotas Vienetinis Testavimas?

Izoliuotas vienetinis testavimas yra programinės įrangos testavimo technika, kai atskiri programos vienetai ar komponentai yra testuojami izoliuotai nuo kitų sistemos dalių. React kontekste tai reiškia individualių React komponentų testavimą, nepasikliaujant jų priklausomybėmis, tokiomis kaip antriniai komponentai, išorinės API ar Redux saugykla. Pagrindinis tikslas yra patikrinti, ar kiekvienas komponentas veikia teisingai ir pateikia laukiamą rezultatą, gavęs konkrečius įvesties duomenis, be išorinių veiksnių įtakos.

Kodėl Izoliacija Svarbi?

Komponentų izoliavimas testavimo metu suteikia keletą svarbių privalumų:

• Greitesnis Testų Vykdymas: Izoliuoti testai vykdomi daug greičiau, nes jiems nereikia sudėtingos konfigūracijos ar sąveikos su išorinėmis priklausomybėmis. Tai pagreitina kūrimo ciklą ir leidžia dažniau testuoti.
• Sutelktas Klaidų Aptikimas: Kai testas nepavyksta, priežastis iš karto akivaizdi, nes testas sutelktas į vieną komponentą ir jo vidinę logiką. Tai supaprastina derinimą ir sumažina laiką, reikalingą klaidoms identifikuoti ir ištaisyti.
• Sumažintos Priklausomybės: Izoliuoti testai yra mažiau jautrūs pakeitimams kitose programos dalyse. Dėl to testai tampa atsparesni ir sumažėja klaidingai teigiamų ar neigiamų rezultatų rizika.
• Pagerintas Kodo Dizainas: Rašant izoliuotus testus, kūrėjai skatinami kurti komponentus su aiškiomis atsakomybėmis ir gerai apibrėžtomis sąsajomis. Tai skatina moduliškumą ir pagerina bendrą programos architektūrą.
• Padidintas Testuojamumas: Izoliuodami komponentus, kūrėjai gali lengvai imituoti (mock) ar pakeisti (stub) priklausomybes, leisdami simuliuoti skirtingus scenarijus ir kraštutinius atvejus, kuriuos būtų sunku atkurti realioje aplinkoje.

Įrankiai ir Bibliotekos React Vienetiniam Testavimui

Yra keletas galingų įrankių ir bibliotekų, palengvinančių React vienetinį testavimą. Štai keletas populiariausių pasirinkimų:

• Jest: Jest yra JavaScript testavimo sistema, sukurta Facebook (dabar Meta), specialiai skirta testuoti React programas. Ji suteikia išsamų funkcijų rinkinį, įskaitant imitavimą (mocking), tvirtinimo (assertion) bibliotekas ir kodo padengimo analizę. Jest yra žinomas dėl savo paprasto naudojimo ir puikaus našumo.
• React Testing Library: React Testing Library yra lengva testavimo biblioteka, skatinanti testuoti komponentus iš vartotojo perspektyvos. Ji suteikia naudingų funkcijų rinkinį, skirtą komponentų užklausoms ir sąveikai su jais, imituojant vartotojo veiksmus. Šis požiūris skatina rašyti testus, kurie labiau atitinka vartotojo patirtį.
• Enzyme: Enzyme yra JavaScript testavimo įrankis React'ui, sukurtas Airbnb. Jis suteikia funkcijų rinkinį, skirtą React komponentų atvaizdavimui ir sąveikai su jų vidinėmis dalimis, tokiomis kaip savybės (props), būsena (state) ir gyvavimo ciklo metodai. Nors vis dar naudojamas daugelyje projektų, naujiems projektams paprastai rekomenduojama React Testing Library.
• Mocha: Mocha yra lanksti JavaScript testavimo sistema, kurią galima naudoti su įvairiomis tvirtinimo ir imitavimo bibliotekomis. Ji suteikia švarią ir pritaikomą testavimo aplinką.
• Chai: Chai yra populiari tvirtinimo biblioteka, kurią galima naudoti su Mocha ar kitomis testavimo sistemomis. Ji suteikia platų tvirtinimo stilių rinkinį, įskaitant `expect`, `should` ir `assert`.
• Sinon.JS: Sinon.JS yra atskira testavimo šnipų (spies), pakaitalų (stubs) ir imitacijų (mocks) biblioteka JavaScript'ui. Ji veikia su bet kuria vienetinio testavimo sistema.

Daugumai šiuolaikinių React projektų rekomenduojamas derinys yra Jest ir React Testing Library. Šis derinys suteikia galingą ir intuityvią testavimo patirtį, kuri gerai dera su geriausiomis React testavimo praktikomis.

Testavimo Aplinkos Paruošimas

Prieš pradedant rašyti vienetinius testus, reikia paruošti testavimo aplinką. Štai žingsnis po žingsnio vadovas, kaip paruošti Jest ir React Testing Library:

1. Įdiekite Priklausomybes:

               npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-env @babel/preset-react
               
   
                 
                   Copy
                 
               
             

   • jest: Jest testavimo sistema.
   • @testing-library/react: React Testing Library, skirta sąveikai su komponentais.
   • @testing-library/jest-dom: Suteikia pasirinktinius Jest atitikmenis (matchers) darbui su DOM.
   • babel-jest: Transformuoja JavaScript kodą Jest'ui.
   • @babel/preset-env: Išmanusis rinkinys, leidžiantis naudoti naujausią JavaScript, nereikalaujant valdyti, kurios sintaksės transformacijos (ir pasirinktinai, naršyklės polifilai) yra reikalingos jūsų tikslinei aplinkai (-oms).
   • @babel/preset-react: Babel rinkinys visiems React įskiepiams.
2. Konfigūruokite Babel (babel.config.js):

               module.exports = {
     presets: [
       ['@babel/preset-env', {targets: {node: 'current'}}],
       '@babel/preset-react',
     ],
   };
   
               
   
                 
                   Copy
                 
               
             

3. Konfigūruokite Jest (jest.config.js):

               module.exports = {
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
     moduleNameMapper: {
       '\\.(css|less|scss)$': 'identity-obj-proxy',
     },
   };
   
               
   
                 
                   Copy
                 
               
             

   • testEnvironment: 'jsdom': Nurodo testavimo aplinką kaip naršyklės tipo aplinką.
   • setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']: Nurodo failą, kuris bus paleistas po testavimo aplinkos paruošimo. Tai paprastai naudojama Jest konfigūravimui ir pasirinktinių atitikmenų pridėjimui.
   • moduleNameMapper: Tvarko CSS/SCSS importus juos imituodama. Tai apsaugo nuo problemų, importuojant stilių failus jūsų komponentuose. `identity-obj-proxy` sukuria objektą, kuriame kiekvienas raktas atitinka stiliuje naudojamą klasės pavadinimą, o reikšmė yra pats klasės pavadinimas.
4. Sukurkite setupTests.js (src/setupTests.js):

               import '@testing-library/jest-dom/extend-expect';
               
   
                 
                   Copy
                 
               
             

   Šis failas išplečia Jest pasirinktiniais atitikmenimis iš `@testing-library/jest-dom`, tokiais kaip `toBeInTheDocument`.

5. Atnaujinkite package.json:

               "scripts": {
     "test": "jest",
     "test:watch": "jest --watchAll"
   }
               
   
                 
                   Copy
                 
               
             

   Pridėkite testavimo scenarijus į savo `package.json` failą, kad galėtumėte paleisti testus ir stebėti pakeitimus.

Pirmojo Izoliuoto Vienetinio Testo Rašymas

Sukurkime paprastą React komponentą ir parašykime jam izoliuotą vienetinį testą.

Pavyzdinis Komponentas (src/components/Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name || 'World'}!</h1>;
}

export default Greeting;
            

              
                Copy
              
            
          

Testo Failas (src/components/Greeting.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders the greeting with the provided name', () => {
    render(<Greeting name="John" />);
    const greetingElement = screen.getByText('Hello, John!');
    expect(greetingElement).toBeInTheDocument();
  });

  it('renders the greeting with the default name when no name is provided', () => {
    render(<Greeting />);
    const greetingElement = screen.getByText('Hello, World!');
    expect(greetingElement).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

Paaiškinimas:

• `describe` blokas: Grupuoja susijusius testus.
• `it` blokas: Apibrėžia atskirą testo atvejį.
• `render` funkcija: Atvaizduoja komponentą į DOM.
• `screen.getByText` funkcija: Ieško DOM elemento su nurodytu tekstu.
• `expect` funkcija: Atlieka tvirtinimą apie komponento išvestį.
• `toBeInTheDocument` atitikmuo: Patikrina, ar elementas yra DOM'e.

Norėdami paleisti testus, vykdykite šią komandą savo terminale:

            npm test
            

              
                Copy
              
            
          

Priklausomybių Imitavimas (Mocking)

Izoliuotame vienetiniame testavime dažnai reikia imituoti priklausomybes, kad išoriniai veiksniai nedarytų įtakos testo rezultatams. Imitavimas (mocking) apima realių priklausomybių pakeitimą supaprastintomis versijomis, kurias galima valdyti ir manipuliuoti testavimo metu.

Pavyzdys: Funkcijos Imitavimas

Tarkime, turime komponentą, kuris gauna duomenis iš API:

Komponentas (src/components/DataFetcher.js):

            import React, { useState, useEffect } from 'react';

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const fetchedData = await fetchData();
      setData(fetchedData);
    }

    loadData();
  }, []);

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div><h2>Data:</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>;
}

export default DataFetcher;
            

              
                Copy
              
            
          

Testo Failas (src/components/DataFetcher.test.js):

            import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import DataFetcher from './DataFetcher';

// Mock the fetchData function
const mockFetchData = jest.fn();

// Mock the module that contains the fetchData function
jest.mock('./DataFetcher', () => ({
  __esModule: true,
  default: function MockedDataFetcher() {
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      async function loadData() {
        const fetchedData = await mockFetchData();
        setData(fetchedData);
      }
      loadData();
    }, []);

    if (!data) {
      return <p>Loading...</p>;
    }

    return <div><h2>Data:</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>;
  },
}));

describe('DataFetcher Component', () => {
  it('renders the data fetched from the API', async () => {
    // Set the mock implementation
    mockFetchData.mockResolvedValue({ name: 'Test Data' });

    render(<DataFetcher />);

    // Wait for the data to load
    await waitFor(() => screen.getByText('Data:'));

    // Assert that the data is rendered correctly
    expect(screen.getByText('{"name":"Test Data"}')).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

Paaiškinimas:

• `jest.mock('./DataFetcher', ...)`: Imituoja visą `DataFetcher` komponentą, pakeisdamas jo originalią implementaciją imituota versija. Šis metodas efektyviai izoliuoja testą nuo bet kokių išorinių priklausomybių, įskaitant `fetchData` funkciją, apibrėžtą komponente.
• `mockFetchData.mockResolvedValue({ name: 'Test Data' })` Nustato imituotą grąžinimo reikšmę `fetchData` funkcijai. Tai leidžia valdyti duomenis, kuriuos grąžina imituota funkcija, ir simuliuoti skirtingus scenarijus.
• `await waitFor(() => screen.getByText('Data:'))` Laukia, kol atsiras tekstas „Data:“, užtikrinant, kad imituotas API iškvietimas būtų baigtas prieš atliekant tvirtinimus.

Modulių Imitavimas

Jest suteikia galingus mechanizmus imituoti ištisus modulius. Tai ypač naudinga, kai komponentas priklauso nuo išorinių bibliotekų ar pagalbinių funkcijų.

Pavyzdys: Datos Pagalbinės Funkcijos Imitavimas

Tarkime, turite komponentą, kuris rodo suformatuotą datą naudodamas pagalbinę funkciją:

Komponentas (src/components/DateDisplay.js):

            import React from 'react';
import { formatDate } from '../utils/dateUtils';

function DateDisplay({ date }) {
  const formattedDate = formatDate(date);
  return <p>The date is: {formattedDate}</p>;
}

export default DateDisplay;
            

              
                Copy
              
            
          

Pagalbinė Funkcija (src/utils/dateUtils.js):

            export function formatDate(date) {
  return date.toLocaleDateString('en-US');
}
            

              
                Copy
              
            
          

Testo Failas (src/components/DateDisplay.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import DateDisplay from './DateDisplay';
import * as dateUtils from '../utils/dateUtils';

describe('DateDisplay Component', () => {
  it('renders the formatted date', () => {
    // Mock the formatDate function
    const mockFormatDate = jest.spyOn(dateUtils, 'formatDate');
    mockFormatDate.mockReturnValue('2024-01-01');

    render(<DateDisplay date={new Date('2024-01-01T00:00:00.000Z')} />);

    const dateElement = screen.getByText('The date is: 2024-01-01');
    expect(dateElement).toBeInTheDocument();

    // Restore the original function
    mockFormatDate.mockRestore();
  });
});
            

              
                Copy
              
            
          

Paaiškinimas:

• `import * as dateUtils from '../utils/dateUtils'` Importuoja visus eksportus iš `dateUtils` modulio.
• `jest.spyOn(dateUtils, 'formatDate')` Sukuria šnipą (spy) `formatDate` funkcijai `dateUtils` modulyje. Tai leidžia stebėti funkcijos iškvietimus ir pakeisti jos implementaciją.
• `mockFormatDate.mockReturnValue('2024-01-01')` Nustato imituotą grąžinimo reikšmę `formatDate` funkcijai.
• `mockFormatDate.mockRestore()` Atkuria originalią funkcijos implementaciją po testo pabaigos. Tai užtikrina, kad imitacija neturės įtakos kitiems testams.

Geriausios Izoliuoto Vienetinio Testavimo Praktikos

Norėdami maksimaliai išnaudoti izoliuoto vienetinio testavimo privalumus, laikykitės šių geriausių praktikų:

• Pirmiausia Rašykite Testus (TDD): Praktikuokite Testais Grįstą Kūrimą (TDD), rašydami testus prieš rašydami patį komponento kodą. Tai padeda išsiaiškinti reikalavimus ir užtikrina, kad komponentas kuriamas atsižvelgiant į testuojamumą.
• Sutelkite Dėmesį į Komponento Logiką: Koncentruokitės į komponento vidinės logikos ir elgsenos testavimą, o ne į jo atvaizdavimo detales.
• Naudokite Prasmingus Testų Pavadinimus: Naudokite aiškius ir aprašomuosius testų pavadinimus, kurie tiksliai atspindi testo paskirtį.
• Testus Laikykite Glaustus ir Sutelktus: Kiekvienas testas turėtų būti sutelktas į vieną komponento funkcionalumo aspektą.
• Venkite Perteklinio Imitavimo: Imituokite tik tas priklausomybes, kurios yra būtinos komponentui izoliuoti. Perteklinis imitavimas gali lemti trapius testus, kurie netiksliai atspindi komponento elgseną realioje aplinkoje.
• Testuokite Kraštutinius Atvejus: Nepamirškite testuoti kraštutinių atvejų ir ribinių sąlygų, kad užtikrintumėte, jog komponentas tinkamai tvarkosi su netikėtais įvesties duomenimis.
• Palaikykite Testų Padengimą: Siekite aukšto testų padengimo, kad užtikrintumėte, jog visos komponento dalys yra tinkamai patikrintos.
• Peržiūrėkite ir Refaktorizuokite Testus: Reguliariai peržiūrėkite ir refaktorizuokite savo testus, kad užtikrintumėte, jog jie išlieka aktualūs ir lengvai prižiūrimi.

Internacionalizacija (i18n) ir Vienetinis Testavimas

Kuriant programas pasaulinei auditorijai, internacionalizacija (i18n) yra labai svarbi. Vienetinis testavimas atlieka gyvybiškai svarbų vaidmenį užtikrinant, kad i18n yra įgyvendinta teisingai ir kad programa rodo turinį tinkama kalba ir formatu skirtingoms lokalėms.

Lokalės Specifinio Turinio Testavimas

Testuojant komponentus, kurie rodo lokalės specifinį turinį (pvz., datas, skaičius, valiutas, tekstą), reikia užtikrinti, kad turinys būtų teisingai atvaizduotas skirtingoms lokalėms. Tai paprastai apima i18n bibliotekos imitavimą arba lokalės specifinių duomenų pateikimą testavimo metu.

Pavyzdys: Datos Komponento su i18n Testavimas

Tarkime, turite komponentą, kuris rodo datą naudodamas i18n biblioteką, tokią kaip `react-intl`:

Komponentas (src/components/LocalizedDate.js):

            import React from 'react';
import { FormattedDate } from 'react-intl';

function LocalizedDate({ date }) {
  return <p>The date is: <FormattedDate value={date} /></p>;
}

export default LocalizedDate;
            

              
                Copy
              
            
          

Testo Failas (src/components/LocalizedDate.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import LocalizedDate from './LocalizedDate';

describe('LocalizedDate Component', () => {
  it('renders the date in the specified locale', () => {
    const date = new Date('2024-01-01T00:00:00.000Z');

    render(
      <IntlProvider locale="fr" messages={{}}>
        <LocalizedDate date={date} />
      </IntlProvider>
    );

    // Wait for the date to be formatted
    const dateElement = screen.getByText('The date is: 01/01/2024'); // French format
    expect(dateElement).toBeInTheDocument();
  });

 it('renders the date in the default locale', () => {
    const date = new Date('2024-01-01T00:00:00.000Z');

    render(
      <IntlProvider locale="en" messages={{}}>
        <LocalizedDate date={date} />
      </IntlProvider>
    );

    // Wait for the date to be formatted
    const dateElement = screen.getByText('The date is: 1/1/2024'); // English format
    expect(dateElement).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

Paaiškinimas:

• `<IntlProvider locale="fr" messages={{}}>` Apgaubia komponentą su `IntlProvider`, nurodant norimą lokalę ir tuščią pranešimų objektą.
• `screen.getByText('The date is: 01/01/2024')` Patvirtina, kad data atvaizduojama prancūzišku formatu (diena/mėnuo/metai).

Naudodami `IntlProvider`, galite simuliuoti skirtingas lokales ir patikrinti, ar jūsų komponentai teisingai atvaizduoja turinį pasaulinei auditorijai.

Pažangios Testavimo Technikos

Be pagrindų, yra keletas pažangių technikų, kurios gali dar labiau pagerinti jūsų React vienetinio testavimo strategiją:

• Momentinių Nuotraukų Testavimas (Snapshot Testing): Momentinių nuotraukų testavimas apima komponento atvaizduotos išvesties nuotraukos fiksavimą ir jos palyginimą su anksčiau išsaugota nuotrauka. Tai padeda aptikti netikėtus komponento vartotojo sąsajos pokyčius. Nors naudingi, momentinių nuotraukų testai turėtų būti naudojami apdairiai, nes jie gali būti trapūs ir reikalauti dažno atnaujinimo, kai keičiasi vartotojo sąsaja.
• Savybėmis Grįstas Testavimas (Property-Based Testing): Savybėmis grįstas testavimas apima savybių, kurios visada turi būti teisingos komponentui, nepriklausomai nuo įvesties verčių, apibrėžimą. Tai leidžia išbandyti platų įvesties verčių spektrą su vienu testo atveju. Bibliotekos, tokios kaip `jsverify`, gali būti naudojamos savybėmis grįstam testavimui JavaScript.
• Prieinamumo Testavimas (Accessibility Testing): Prieinamumo testavimas užtikrina, kad jūsų komponentai yra prieinami vartotojams su negalia. Įrankiai, tokie kaip `react-axe`, gali būti naudojami automatiškai aptikti prieinamumo problemas jūsų komponentuose testavimo metu.

Išvada

Izoliuotas vienetinis testavimas yra pagrindinis React komponentų testavimo aspektas. Izoliuodami komponentus, imituodami priklausomybes ir laikydamiesi geriausių praktikų, galite sukurti patikimus ir lengvai prižiūrimus testus, kurie užtikrina jūsų React programų kokybę. Testavimo įsisavinimas ankstyvoje stadijoje ir jo integravimas visame kūrimo procese lems patikimesnę programinę įrangą ir labiau pasitikinčią kūrėjų komandą. Nepamirškite atsižvelgti į internacionalizacijos aspektus, kurdami pasaulinei auditorijai, ir pasinaudokite pažangiomis testavimo technikomis, kad dar labiau patobulintumėte savo testavimo strategiją. Laiko investavimas į tinkamų vienetinio testavimo technikų mokymąsi ir įgyvendinimą ilgainiui atsipirks, sumažindamas klaidų skaičių, pagerindamas kodo kokybę ir supaprastindamas priežiūrą.