반응 테스트

Photo by Mike Kenneally on Unsplash

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 implementationieren.

내 프로젝트는 대시보드에 있습니다. 테스트 작업을 수행하는 데 중요한 작업입니다. Neben einem Taschenrechner-Tool, verfügt das Dashboard über einen spziiellen Rechner, der den Preis einer Flüssiggasbestellung errechnet, abhängig von den eingegeben Konditionen.

다스 설정

Mein Starter-Setup은 Next.js 및 TailwindCSS에서 가장 좋습니다. Für das Testen verwende ich Jest and 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.

에르스테 테스트

대시보드의 게시판은 이미 무너졌음을 의미합니다. 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.
테스트를 위한 테스트는 example.test.js 날짜와 Jest의 자동 작업에 사용됩니다.

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.

힐프라이체 링크:

How to use React Testing Library Tutorial

Setting Up Testing Library with NextJS