Test af React-komponenter: Mestring af Snapshot- og Integrationstests

I en verden af moderne webudvikling er det altafgørende at sikre pålideligheden og robustheden af din brugergrænseflade (UI). React, et populært JavaScript-bibliotek til at bygge UI'er, giver udviklere en komponentbaseret arkitektur. Grundig test af disse komponenter er afgørende for at levere en brugeroplevelse af høj kvalitet. Denne artikel dykker ned i to essentielle teststrategier: snapshot-test og integrationstest, og giver praktiske eksempler og bedste praksis for at hjælpe dig med at mestre test af React-komponenter.

Hvorfor teste React-komponenter?

Før vi dykker ned i detaljerne omkring snapshot- og integrationstest, lad os først forstå, hvorfor det er så vigtigt at teste React-komponenter:

• Forebyg regressioner: Tests kan hjælpe med at opdage uventede ændringer i dine komponenters adfærd og forhindre, at regressioner sniger sig ind i din kodebase.
• Forbedr kodekvaliteten: At skrive tests opfordrer dig til at tænke over designet og strukturen af dine komponenter, hvilket fører til renere og mere vedligeholdelsesvenlig kode.
• Øg selvtilliden: At have en omfattende testsuite giver dig selvtillid, når du foretager ændringer i din kode, da du ved, at du vil blive advaret, hvis noget går i stykker.
• Frem samarbejde: Tests fungerer som dokumentation for dine komponenter, hvilket gør det lettere for andre udviklere at forstå og arbejde med din kode.

Snapshot-test

Hvad er snapshot-test?

Snapshot-test indebærer at rendere en React-komponent og sammenligne dens output (et snapshot) med et tidligere gemt snapshot. Hvis der er nogen forskelle, fejler testen, hvilket indikerer et potentielt problem. Det er som at tage et "billede" af din komponents output og sikre, at det ikke ændrer sig uventet.

Snapshot-test er især nyttigt til at verificere, at din UI ikke har ændret sig utilsigtet. Det bruges ofte til at opdage ændringer i styling, layout eller den overordnede struktur af dine komponenter.

Sådan implementeres snapshot-test

Vi vil bruge Jest, et populært JavaScript-testframework, og Enzyme (eller React Testing Library - se nedenfor) til at demonstrere snapshot-test.

Eksempel med Jest og Enzyme (Forældelsesmeddelelse):

Bemærk: Enzyme betragtes af mange som forældet til fordel for React Testing Library. Selvom dette eksempel demonstrerer brugen af Enzyme, anbefaler vi React Testing Library til nye projekter.

Først skal du installere Jest og Enzyme:

            npm install --save-dev jest enzyme enzyme-adapter-react-16
npm install --save react-test-renderer

            

              
                Copy
              
            
          

Erstat `react-adapter-react-16` med den passende adapter til din React-version.

Opret en simpel React-komponent (f.eks. Greeting.js):

            import React from 'react';

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

export default Greeting;

            

              
                Copy
              
            
          

Opret nu en snapshot-test (f.eks. Greeting.test.js):

            import React from 'react';
import { shallow } from 'enzyme';
import Greeting from './Greeting';

describe('Greeting-komponent', () => {
  it('renderes korrekt', () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Kør testen med Jest:

            npm test

            

              
                Copy
              
            
          

Første gang du kører testen, vil Jest oprette en snapshot-fil (f.eks. __snapshots__/Greeting.test.js.snap), der indeholder det renderede output af Greeting-komponenten.

Efterfølgende testkørsler vil sammenligne det nuværende output med det gemte snapshot. Hvis de matcher, består testen. Hvis de afviger, fejler testen, og du bliver nødt til at gennemgå ændringerne og enten opdatere snapshottet eller rette komponenten.

Eksempel med Jest og React Testing Library:

React Testing Library er en mere moderne og anbefalet tilgang til at teste React-komponenter. Den fokuserer på at teste komponenten fra brugerens perspektiv i stedet for at fokusere på implementeringsdetaljer.

Først skal du installere Jest og React Testing Library:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest

            

              
                Copy
              
            
          

Modificer snapshot-testen (f.eks. Greeting.test.js):

            import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import '@testing-library/jest-dom/extend-expect';

describe('Greeting-komponent', () => {
  it('renderes korrekt', () => {
    const { asFragment } = render(<Greeting name="World" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Kør testen med Jest:

            npm test

            

              
                Copy
              
            
          

Første gang du kører testen, vil Jest oprette en snapshot-fil (f.eks. __snapshots__/Greeting.test.js.snap), der indeholder det renderede output af Greeting-komponenten.

Efterfølgende testkørsler vil sammenligne det nuværende output med det gemte snapshot. Hvis de matcher, består testen. Hvis de afviger, fejler testen, og du bliver nødt til at gennemgå ændringerne og enten opdatere snapshottet eller rette komponenten.

Bedste praksis for snapshot-test

• Behandl snapshots som kode: Commit dine snapshot-filer til dit versionskontrolsystem (f.eks. Git) ligesom enhver anden kodefil.
• Gennemgå ændringer omhyggeligt: Når en snapshot-test fejler, skal du omhyggeligt gennemgå ændringerne i snapshot-filen for at afgøre, om de er tilsigtede eller indikerer en fejl.
• Opdater snapshots med vilje: Hvis ændringerne er tilsigtede, skal du opdatere snapshot-filen, så den afspejler det nye forventede output.
• Undgå overdreven brug af snapshots: Snapshot-test er bedst egnet til komponenter med relativt stabile UI'er. Undgå at bruge det til komponenter, der ændrer sig ofte, da det kan føre til mange unødvendige opdateringer af snapshots.
• Overvej læsbarhed: Nogle gange kan snapshot-filer være svære at læse. Brug værktøjer som Prettier til at formatere dine snapshot-filer for bedre læsbarhed.

Hvornår skal man bruge snapshot-test?

Snapshot-test er mest effektivt i følgende scenarier:

• Simple komponenter: Test af simple komponenter med forudsigeligt output.
• UI-biblioteker: Verificering af den visuelle konsistens af UI-komponenter på tværs af forskellige versioner.
• Regressionstest: Opdagelse af utilsigtede ændringer i eksisterende komponenter.

Integrationstest

Hvad er integrationstest?

Integrationstest indebærer at teste, hvordan flere komponenter arbejder sammen for at opnå en specifik funktionalitet. Det verificerer, at de forskellige dele af din applikation interagerer korrekt, og at det samlede system opfører sig som forventet.

I modsætning til enhedstests, der fokuserer på individuelle komponenter i isolation, fokuserer integrationstests på interaktionerne mellem komponenter. Dette hjælper med at sikre, at din applikation fungerer korrekt som en helhed.

Sådan implementeres integrationstest

Vi vil igen bruge Jest og React Testing Library til at demonstrere integrationstest.

Lad os oprette en simpel applikation med to komponenter: Input og Display. Input-komponenten lader brugeren indtaste tekst, og Display-komponenten viser den indtastede tekst.

Først skal du oprette Input-komponenten (f.eks. Input.js):

            import React, { useState } from 'react';

function Input({ onInputChange }) {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
      placeholder="Enter text..."
    />
  );
}

export default Input;

            

              
                Copy
              
            
          

Dernæst skal du oprette Display-komponenten (f.eks. Display.js):

            import React from 'react';

function Display({ text }) {
  return <p>You entered: {text}</p>;
}

export default Display;

            

              
                Copy
              
            
          

Opret nu den primære App-komponent, der integrerer Input- og Display-komponenterne (f.eks. App.js):

            import React, { useState } from 'react';
import Input from './Input';
import Display from './Display';

function App() {
  const [inputText, setInputText] = useState('');

  const handleInputChange = (text) => {
    setInputText(text);
  };

  return (
    <div>
      <Input onInputChange={handleInputChange} />
      <Display text={inputText} />
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Opret en integrationstest (f.eks. App.test.js):

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('App-komponent', () => {
  it('opdaterer displayet, når input ændres', () => {
    render(<App />);
    const inputElement = screen.getByPlaceholderText('Enter text...');
    const displayElement = screen.getByText('You entered: ');

    fireEvent.change(inputElement, { target: { value: 'Hello, world!' } });

    expect(displayElement).toHaveTextContent('You entered: Hello, world!');
  });
});

            

              
                Copy
              
            
          

Kør testen med Jest:

            npm test

            

              
                Copy
              
            
          

Denne test simulerer en bruger, der skriver tekst ind i Input-komponenten og verificerer, at Display-komponenten opdateres med den indtastede tekst. Dette bekræfter, at Input- og Display-komponenterne interagerer korrekt.

Bedste praksis for integrationstest

• Fokuser på nøgleinteraktioner: Identificer de vigtigste interaktioner mellem komponenter og fokuser dine integrationstests på dem.
• Brug realistiske data: Brug realistiske data i dine integrationstests for at simulere virkelige scenarier.
• Mock eksterne afhængigheder: Mock eventuelle eksterne afhængigheder (f.eks. API-kald) for at isolere dine komponenter og gøre dine tests mere pålidelige. Biblioteker som `msw` (Mock Service Worker) er fremragende til dette.
• Skriv klare og præcise tests: Skriv klare og præcise tests, der er lette at forstå og vedligeholde.
• Test brugerflows: Fokuser på at teste komplette brugerflows for at sikre, at din applikation opfører sig som forventet fra brugerens perspektiv.

Hvornår skal man bruge integrationstest?

Integrationstest er mest effektivt i følgende scenarier:

• Komplekse komponenter: Test af komplekse komponenter, der interagerer med andre komponenter eller eksterne systemer.
• Brugerflows: Verificering af, at komplette brugerflows fungerer korrekt.
• API-interaktioner: Test af integrationen mellem din frontend og backend API'er.

Snapshot-test vs. Integrationstest: En sammenligning

Her er en tabel, der opsummerer de vigtigste forskelle mellem snapshot-test og integrationstest:

Valg af den rigtige teststrategi

Den bedste teststrategi afhænger af de specifikke behov i dit projekt. Generelt er det en god idé at bruge en kombination af både snapshot-test og integrationstest for at sikre, at dine React-komponenter fungerer korrekt.

• Start med enhedstests: Før du kaster dig over snapshot- eller integrationstests, skal du sikre dig, at du har gode enhedstests for dine individuelle komponenter.
• Brug snapshot-tests til UI-komponenter: Brug snapshot-tests til at verificere den visuelle konsistens af dine UI-komponenter.
• Brug integrationstests til komplekse interaktioner: Brug integrationstests til at verificere, at dine komponenter interagerer korrekt, og at din applikation opfører sig som forventet.
• Overvej End-to-End (E2E) tests: For kritiske brugerflows bør du overveje at tilføje end-to-end-tests ved hjælp af værktøjer som Cypress eller Playwright for at simulere reelle brugerinteraktioner og verificere den overordnede applikationsadfærd.

Ud over snapshot- og integrationstests

Selvom snapshot- og integrationstests er afgørende, er de ikke de eneste typer tests, du bør overveje for dine React-komponenter. Her er nogle andre teststrategier, du skal have i tankerne:

• Enhedstests: Som nævnt tidligere er enhedstests essentielle for at teste individuelle komponenter i isolation.
• End-to-End (E2E) tests: E2E-tests simulerer reelle brugerinteraktioner og verificerer den overordnede applikationsadfærd.
• Egenskabsbaseret test: Egenskabsbaseret test indebærer at definere egenskaber, der altid skal være sande for dine komponenter, og derefter generere tilfældige input for at teste disse egenskaber.
• Tilgængelighedstest: Tilgængelighedstest sikrer, at dine komponenter er tilgængelige for brugere med handicap.

Konklusion

Test er en integreret del af at bygge robuste og pålidelige React-applikationer. Ved at mestre teknikker til snapshot- og integrationstest kan du markant forbedre kvaliteten af din kode, forhindre regressioner og øge din selvtillid, når du foretager ændringer. Husk at vælge den rigtige teststrategi for hver komponent og at bruge en kombination af forskellige typer tests for at sikre omfattende dækning. Inkorporering af værktøjer som Jest, React Testing Library og potentielt Mock Service Worker (MSW) vil strømline din test-workflow. Prioriter altid at skrive tests, der afspejler brugerens oplevelse. Ved at omfavne en testkultur kan du bygge React-applikationer af høj kvalitet, der leverer en fantastisk brugeroplevelse til dit globale publikum.