DEV Community

loading...
Cover image for React testing

React testing

schreiandrej profile image schreiandrej ・2 min read

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')
})
Enter fullscreen mode Exit fullscreen mode

Dieser Test wurde bestanden, doch weiter sollen folgen.

Hilfreiche Link:

Discussion (0)

Forem Open with the Forem app