# React Testing (React / Next.js)

> React Testing Library, Jest, Vitest, Komponententests, Mocking, Benutzerinteraktionen, Coverage

- 20 Interview-Fragen
- Mid-Level
- [Interview-Fragen: React / Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen.md)

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

**Antwort**

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.

## 2. Was ist der Hauptvorteil von getByRole gegenüber getByTestId?

**Antwort**

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.

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

**Antwort**

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

## 17 weitere Fragen verfügbar

- Warum empfiehlt React Testing Library, Implementierungsdetails NICHT zu testen?
- Was ist der Unterschied zwischen render und screen in React Testing Library?

Kostenlos registrieren: https://sharpskill.dev/de/login

## Weitere React / Next.js-Interviewthemen

- [JavaScript-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/javascript-essentials.md): 25 Fragen, Junior
- [React-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-fundamentals.md): 20 Fragen, Junior
- [React Hooks](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-hooks.md): 22 Fragen, Junior
- [Komponentenlebenszyklus](https://sharpskill.dev/de/technologies/react-next/interviewfragen/component-lifecycle.md): 18 Fragen, Junior
- [React Router](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-router.md): 20 Fragen, Junior
- [Zustandsverwaltung mit Context](https://sharpskill.dev/de/technologies/react-next/interviewfragen/state-management-context.md): 18 Fragen, Junior
- [Formulare & Controlled Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/forms-controlled-components.md): 20 Fragen, Mid-Level
- [Datenabruf & API](https://sharpskill.dev/de/technologies/react-next/interviewfragen/fetching-data-api.md): 20 Fragen, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-query-tanstack.md): 20 Fragen, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/de/technologies/react-next/interviewfragen/styling-css-in-js.md): 18 Fragen, Mid-Level
- [Next.js Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-fundamentals.md): 25 Fragen, Mid-Level
- [TypeScript mit React](https://sharpskill.dev/de/technologies/react-next/interviewfragen/typescript-react.md): 20 Fragen, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-data-fetching.md): 24 Fragen, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-server-actions.md): 20 Fragen, Mid-Level
- [Routing & Navigation in Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-routing-navigation.md): 22 Fragen, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-api-routes.md): 20 Fragen, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-metadata-seo.md): 18 Fragen, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-middleware-auth.md): 22 Fragen, Mid-Level
- [Zustand State Management](https://sharpskill.dev/de/technologies/react-next/interviewfragen/zustand-state-management.md): 18 Fragen, Mid-Level
- [React Performance-Optimierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-performance-optimization.md): 22 Fragen, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-error-boundaries.md): 18 Fragen, Senior
- [Advanced React Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/advanced-react-patterns.md): 20 Fragen, Senior
- [Erweiterte Next.js-Funktionen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-advanced-features.md): 24 Fragen, Senior
- [Next.js Deployment & Produktion](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-deployment-production.md): 20 Fragen, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-architecture-patterns.md): 22 Fragen, Senior
- [React Server Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-server-components.md): 26 Fragen, Senior
- [Next.js Internationalisierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-internationalization.md): 20 Fragen, Senior
- [React Sicherheit & Best Practices](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-security-best-practices.md): 22 Fragen, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-testing