Photo by Mike Kenneally on Unsplash
Test zu schreiben, gehört heute zum Industriestandart in der IT-Branche. Und wird wahrscheinlich bei allen ernstzunehmenden Unternehmen praktiziert. Auch wenn meine kleinen Projekte auch gut ohne Tests auskommen, werde ich versuchen diese zu Übungszwecken nach zu implementieren.
Mein erstes Projekt ist das Dashboard. Hier ist wird das Testen der Rechenoperationen interessant. Neben einem Taschenrechner-Tool, verfügt das Dashboard über einen speziellen Rechner, der den Preis einer Flüssiggasbestellung errechnet, abhängig von den eingegeben Konditionen.
Das Setup
Mein Starter-Setup besteht aus Next.js und TailwindCSS. Für das Testen verwende ich Jest und die React-testing-library. Nach der Installation der Dependencies wird ein tests Ordner im Root-Verzeichnis erstellt. Die Verzeichnisstruktur ist natürlich von dem Projekt abhängig und die Tests werden entsprechend den Einstellungen in allen Ordner gesucht und ausgeführt. Hier beschränken ich mich nur auf den einen Testordner, in dem alle Tests gespeichert werden.
Der erste Test
Beim Bau des Dashboards ist mir aufgefallen, dass meine Implementierung meines Taschenrechner nicht korrekt ist. Bei Dezimalzahlen werden teilweise falsche Ergebnisse angezeigt. Dieser Fehler hat mich auch zur der Auseinandersetzung mit Tests motiviert. Denn der Fehler ist mir erst bei der Nutzung aufgefallen und nicht beim Entwickeln.
Für den Test benötigen wir eine example.test.js Datei, die von Jest automatisch erkannt wird.
Das Ziel ist es zu testen, ob die erwarteten Ergebnisse von der Calculator Komponente berechnet werden.
import React from 'react'
import { render, screen, fireEvent, cleanup, act } from '@testing-library/react'
import { Calculator } from '@/components/calculator'
/* Aufräumfunktion die von der testing-library zur Vefügung
gestellt wird, um die Testfunktion wieder zu unmounten. */
afterEach(cleanup)
/*Test ob die Komponente gerendert wird. Mit einem Snapshot wird
die Komponente auf Veränderung gegengecheckt.*/
test('renders Calculator component', () => {
const { asFragment } = render(<Calculator />)
expect(asFragment()).toMatchSnapshot()
})
/*Hier wird der dem Input eine arithmetischer Ausdruck zugewiesen,
der das Ergebnis 6,504 haben soll. */
test('calculate 3+3', async () => {
const { getByTestId } = render(<Calculator />)
await act(async () => {
fireEvent.change(screen.getByRole('textbox'), {
target: { value: '3,254+3,25' },
})
fireEvent.click(await screen.getByRole('submit-button'))
})
expect(getByTestId('result')).toHaveTextContent('6,504')
})
Dieser Test wurde bestanden, doch weiter sollen folgen.
Hilfreiche Link:
Top comments (0)