Next.js 15 -täyden pinon verkkosovellukset · Oppitunti

Yksikkö- ja integraatiotestaus

Kirjoittakaa tehokkaita yksikkö- ja integraatiotestejä React-komponenteille ja Next.js-funktioille Jestin ja React Testing Libraryn avulla.

Oppitunti 1/412 vaihetta

Yksikkö- ja integraatiotestaus on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Miksi testaamme koodiamme

Tervetuloa! Nykyaikaisessa verkkokehityksessä on tärkeää varmistaa koodin toiminta odotetulla tavalla, etenkin kun rakennetaan monimutkaisia Next.js-sovelluksia. Tässä testaaminen astuu kuvaan.

Luotettavuus: Testit ehkäisevät virheitä ja regressioita.
Ylläpidettävyys: Hyvin testattua koodia on helpompi refaktoroida ja päivittää.
Luottamus: Voit julkaista uusia ominaisuuksia varmemmin.

Keskitymme yksikkötesteihin (pienet, eristetyt osat) ja integraatiotesteihin (osien toiminta yhdessä).

Jestin ja RTL:n määrittäminen

Jest on suosittu JavaScript-testauskehys, ja React Testing Library (RTL) on kokoelma React-komponenttien testaamiseen tarkoitettuja apuohjelmia. Yhdessä ne muodostavat tehokkaan työkalukaksikon Next.js-sovelluksille.

Asenna ensin tarvittavat paketit:

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

Ensimmäinen yksikkötestisi (funktio)

Yksikkötesti tarkistaa pienen, eristetyn koodiosan, kuten yksittäisen funktion. Luodaan yksinkertainen apufunktio ja kirjoitetaan sille testi.

Tässä on apufunktiomme:

// utils/math.js
function add(a, b) {
  return a + b;
}

// This block makes the file directly runnable via Node.js
if (typeof require !== 'undefined' && require.main === module) {
  console.log("Running add(5, 3):", add(5, 3)); // Expected: 8
  console.log("Running add(10, -2):", add(10, -2)); // Expected: 8
}

<code>add</code>-funktion testaaminen

Kirjoitetaan nyt testi add-funktiolle. Jestissä describe-funktiolla ryhmitellään testit ja test-funktiolla (tai it-funktiolla) määritetään yksittäiset testitapaukset. expect-funktiota käytetään väitteiden tekemiseen.

Tallenna tämä tiedostoon utils/math.test.js:

// utils/math.test.js
import { add } from './math';

describe('add function', () => {
  test('should correctly add two positive numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('should handle negative numbers', () => {
    expect(add(5, -3)).toBe(2);
  });
});

// To run tests: npx jest

Johdatus React Test Libraryyn

React Testing Library (RTL) kannustaa testaamaan komponentteja tavalla, joka jäljittelee käyttäjien toimintaa. Sisäisen tilan tarkistamisen sijaan DOMista haetaan elementtejä, jotka käyttäjä näkee tai joiden kanssa hän on vuorovaikutuksessa.

render: Liittää React-komponentin virtuaaliseen DOMiin.
screen: Tarjoaa menetelmiä renderöidyn DOMin kyselyihin (esimerkiksi getByText ja getByRole).
@testing-library/jest-dom: Lisää mukautettuja vertailijoita, kuten toBeInTheDocument.

Yksinkertaisen React-komponentin testaaminen

Testataan yksinkertainen painikekomponentti. Varmistamme, että se renderöidään oikean tekstin kanssa.

Ensin komponentti (components/Button.jsx):

// components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

Komponentin renderöinnin testaaminen

Seuraavaksi testaamme Button-komponentin. Käytämme render-funktiota sen lisäämiseen näkymään ja screen.getByText-funktiota sen etsimiseen. Sen jälkeen toBeInTheDocument vahvistaa, että komponentti on mukana dokumentissa.

Tallenna tämä tiedostoon components/Button.test.jsx:

// components/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  test('renders with the correct label', () => {
    render(<Button label="Click Me" />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
  });
});

Käyttäjän vuorovaikutuksen simulointi

Pelkkä renderöinti ei riitä, vaan on testattava myös, miten komponentit reagoivat käyttäjän toimintaan. RTL:n fireEvent (tai realistisempaan vuorovaikutukseen tarkoitettu userEvent) auttaa simuloimaan napsautuksia, syöttöarvojen muutoksia ja muita toimintoja.

Voimme tarkistaa, kutsutaanko propsien kautta välitettyä funktiota.

// components/Button.test.jsx (continued)
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component interactions', () => {
  test('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest mock function
    render(<Button label="Click Me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integraatio: reittikäsittelijöiden testaaminen

Next.js:n reittikäsittelijät (App Routerin API-reitit) ovat palvelinpuolen funktioita. Voimme testata niitä tuomalla ne suoraan ja kutsumalla niiden HTTP-metodeja, kuten GET ja POST, sekä matkimalla Next.js:n pyyntö- ja vastausolioita.

Tässä on esimerkki:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' }, { status: 200 });
}

// app/api/hello/route.test.js
import { GET } from './route';

describe('GET /api/hello', () => {
  test('should return a greeting message with status 200', async () => {
    // No need to mock NextRequest/NextResponse directly for simple cases
    // as NextResponse.json returns a standard Response object.
    const response = await GET();
    const json = await response.json();

    expect(response.status).toBe(200);
    expect(json.message).toBe('Hello from API!');
  });
});

Tehokkaiden testien parhaat käytännöt

Hyödyllisiä ja ylläpidettäviä testejä kirjoittaessa:

Testaa käyttäjän toimintaa: Keskity siihen, mitä käyttäjä näkee ja tekee, älä komponentin sisäiseen tilaan.
Pidä testit kohdennettuina: Kunkin testin pitäisi mielellään tarkistaa yksi asia.
Tee testeistä nopeita: Hitaat testit vähentävät halua suorittaa niitä usein.
Luettavuus: Kirjoita selkeitä testejä, jotka on helppo ymmärtää.
Jäljittele riippuvuuksia: Käytä jest.mock()- tai jest.fn()-funktiota yksikköjen eristämiseen ja ulkoisten tekijöiden vaikutuksen estämiseen.

Pikatesti

Mikä seuraavista Next.js:n testaamista Jestillä ja React Testing Librarylla koskevista väitteistä on TOSI?

Vastaa interaktiivisessa oppitunnissa

Kertaus: yksikkö- ja integraatiotestaus

Hienoa työtä! Olet oppinut Next.js:n yksikkö- ja integraatiotestauksen perusteet:

Jest on käyttämäsi testauskehys.
React Testing Library auttaa testaamaan komponentteja käyttäjän näkökulmasta.
Yksikkötestit tarkistavat pieniä, eristettyjä koodiyksiköitä.
Integraatiotestit tarkistavat, miten eri osat, kuten komponentit ja API:t, toimivat yhdessä.
Voit testata funktioita, React-komponentteja ja Next.js:n reittikäsittelijöitä.
Parhaisiin käytäntöihin kuuluu käyttäjän toimintaan keskittyminen ja riippuvuuksien jäljittely.

Seuraavaksi tutustumme päästä päähän -testaukseen, jolla testataan kokonaisia sovelluksen työnkulkuja.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Yksikkö- ja integraatiotestaus” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “Yksikkö- ja integraatiotestaus”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Yksikkö- ja integraatiotestaus”?

Kirjoittakaa tehokkaita yksikkö- ja integraatiotestejä React-komponenteille ja Next.js-funktioille Jestin ja React Testing Libraryn avulla. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Yksikkö- ja integraatiotestaus”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?

Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Yksikkö- ja integraatiotestaus
Päästä päähän -testaus Playwrightilla
Monorepot ja microfrontendit
Server Componentien mockaus ja testaaminen

← Takaisin: Next.js 15 -täyden pinon verkkosovellukset