Tesztelés¶

ESLint¶

Az ESLint egy statikus kódelemző eszköz, amely segít azonosítani és javítani a JavaScript kód hibáit és stílusproblémáit. A React projektekben gyakran használják az ESLint-et a kódminőség fenntartása érdekében.

Telepítés¶

npm install eslint --save-dev

Futtatás¶

npx eslint src/

Vagy pedig:

npm run lint

Próba¶

Csináljunk egy üres projektet és hozzunk létre az App.tsx fájlban egy változót, amit nem használunk:

const unusedVariable = 'Ez egy nem használt változó';

Ezután futtassuk az ESLint-et:

npx eslint src/ --max-warnings=0

Az ESLint figyelmeztetést fog adni a unusedVariable változó miatt, mivel az nincs használatban. Ez segít abban, hogy tisztán tartsuk a kódunkat és elkerüljük a felesleges változókat.

Szabályok

CI/CD¶

Lehetőségünk van automatikusan a repón belül futtatni a teszteket. Ehhez hozzunk létre egy .github/workflows/ci.yml fájlt a következő tartalommal:

name: CI/CD

on:
    push:
        branches: [main, master]

jobs:
    lint-and-test:
        runs-on: ubuntu-latest

        steps:
            - name: Git Checkout
              uses: actions/checkout@v3

            - name: Use Node.js
              uses: actions/setup-node@v3
              with:
                  node-version: 22

            - name: Install dependencies
              run: npm ci

            - name: Run ESLint
              run: npm run lint

Husky¶

A Husky egy eszköz, amely lehetővé teszi a Git hook-ok egyszerű kezelését. Segítségével automatikusan futtathatunk teszteket vagy lintelést minden commit előtt, így biztosítva a kódminőséget.

Telepítés¶

npm install - save-dev husky
npx husky init

Pre-commit hook létrehozása¶

A Husky segítségével létrehozhatunk egy pre-commit hook-ot, amely automatikusan futtatja az ESLint-et minden commit előtt. Amennyiben a lintelés hibát talál, a commit nem fog végrehajtódni, így biztosítva, hogy csak tiszta kód kerüljön a verziókezelőbe.

Hozzunk létre egy .husky könyvtárat a projekt gyökerében, majd adjuk ki az alábbi parancsot CMD-ben:

echo npm test > .husky/pre-commit

Próba¶

Most próbáljuk meg commitolni olyan fájlt, amelyben szándékosan hagyunk egy lint hibát, például egy nem használt változót.

Amikor megpróbáljuk commitolni a változtatásokat, a Husky automatikusan futtatja az ESLint-et, és ha hibát talál, megakadályozza a commit végrehajtását.

Egyéb hook-ok¶

A Husky nem csak a pre-commit hook-okat támogatja, hanem számos más Git hook-ot is, mint például a pre-push, post-merge, vagy akár a commit-msg. Ezek segítségével különböző műveleteket hajthatunk végre a Git műveletek során, például futtathatunk teszteket push előtt vagy ellenőrizhetjük a commit üzenetek formátumát.

Husky dokumentáció

Vitest¶

Telepítsük fel a szükséges csomagot:

npm install vitest

Módosítsuk a package.json fájlt, hogy a tesztparancs a Vitest-et használja:

"scripts": {
    "test": "vitest",
    "lint": "eslint .",
    // ...
}

Statikus tartalom tesztelése¶

Ellenőrizzük, hogy létezik-e a Vite + React szöveg az oldalon.

App.tsx¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import { useState } from 'react';
import './App.css';

function App() {
    const [count, setCount] = useState(0);

    return (
        <>
            <h1>Vite + React</h1>
            <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
                <p>
                    Edit <code>src/App.tsx</code> and save to test HMR
                </p>
            </div>
            <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
        </>
    );
}

export default App;

App.test.tsx¶

Hozzunk létre egy App.test.tsx fájlt a következő tartalommal:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { renderToString } from 'react-dom/server';
import { describe, it, expect } from 'vitest';
import App from './App';

describe('App', () => {
    it('tartalmazza a Vite szöveget', () => {
        const html = renderToString(<App />);
        expect(html).toContain('Vite + React');
    });
});

Futtatás¶

npm run test

API hívás tesztelése¶

Használjuk a korábbi pizzák backendet és teszteljük, hogy megjelenik-e a Margherita pizza.

App.tsx¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { useEffect, useState } from 'react';
import './App.css';
import type { Pizza } from './types/Pizza';
import apiClient from './api/apiClient';

function App() {
    const [pizzak, setPizzak] = useState<Array<Pizza>>([]);

    useEffect(() => {
        apiClient.get('/pizzak').then((response) => setPizzak(response.data));
    }, []);

    return (
        <div>
            {pizzak.map((i) => (
                <h1 key={i.id}>{i.nev}</h1>
            ))}
        </div>
    );
}

export default App;

App.test.tsx¶

Telepítsük az alábbi csomagokat:

npm i happy-dom @testing-library/react

Módosítsuk a kódot:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// @vitest-environment happy-dom

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import App from './App';

describe('App (real API)', () => {
    it('igazi API-ból betölti és megjeleníti a Margheritát', async () => {
        render(<App />);

        // megvárja, amíg a useEffect lefut + API válasz megjön + render
        const el = await screen.findByText('Margherita', {}, { timeout: 10000 });
        expect(el).toBeTruthy();
    });
});

Futtatás¶

Futtassuk a teszteket:

npm run test