Question 1

Was ist der Hauptunterschied zwischen getBy, queryBy und findBy in React Testing Library?

Accepted Answer

getBy wirft einen Fehler, wenn das Element nicht existiert (synchrone Assertions), queryBy gibt null zurück, wenn das Element nicht existiert (Abwesenheit prüfen), und findBy gibt ein Promise für asynchrone Elemente zurück. Verwende standardmäßig getBy für Elemente, die existieren müssen, queryBy, um zu überprüfen, dass ein Element nicht vorhanden ist, und findBy, um auf das Erscheinen eines Elements nach einer Verzögerung zu warten.

Question 2

Was ist der Hauptvorteil von getByRole gegenüber getByTestId?

Accepted Answer

getByRole fördert Best Practices für Barrierefreiheit, indem Elemente über ihre semantische ARIA-Rolle (button, textbox, heading) angesprochen werden, was die Barrierefreiheit der Komponente für Screenreader verbessert. getByTestId erfordert das Hinzufügen künstlicher data-testid-Attribute, die keinen Mehrwert für Endbenutzer bieten. React Testing Library empfiehlt, getByRole, getByLabelText und getByText vor getByTestId zu bevorzugen.

Question 3

Wie testet man das bedingte Rendern eines Elements, das NICHT im DOM vorhanden ist?

Accepted Answer

Verwende queryBy, um die Abwesenheit eines Elements zu überprüfen, da es null zurückgibt, anstatt einen Fehler zu werfen. Beispiel: expect(screen.queryByText('Error')).toBeNull() oder expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy würde einen Fehler werfen und den Test fehlschlagen lassen, während findBy auf das Erscheinen des Elements wartet (Timeout bei Abwesenheit).

React Testing

Was ist der Hauptunterschied zwischen getBy, queryBy und findBy in React Testing Library?

Antwort

Was ist der Hauptvorteil von getByRole gegenüber getByTestId?

Antwort

Wie testet man das bedingte Rendern eines Elements, das NICHT im DOM vorhanden ist?

Antwort

Warum empfiehlt React Testing Library, Implementierungsdetails NICHT zu testen?

Was ist der Unterschied zwischen render und screen in React Testing Library?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview