Question 1

Wat is het belangrijkste verschil tussen getBy, queryBy en findBy in React Testing Library?

Accepted Answer

getBy gooit een fout als het element niet bestaat (synchrone assertions), queryBy retourneert null als het element niet bestaat (afwezigheid controleren), en findBy retourneert een Promise voor asynchrone elementen. Gebruik standaard getBy voor elementen die moeten bestaan, queryBy om te controleren of een element niet aanwezig is, en findBy om te wachten tot een element verschijnt na een vertraging.

Question 2

Wat is het belangrijkste voordeel van getByRole ten opzichte van getByTestId?

Accepted Answer

getByRole bevordert best practices voor toegankelijkheid door elementen te targeten op hun semantische ARIA-rol (button, textbox, heading), wat de toegankelijkheid van componenten voor schermlezers verbetert. getByTestId vereist het toevoegen van kunstmatige data-testid-attributen die geen waarde bieden voor eindgebruikers. React Testing Library raadt aan om getByRole, getByLabelText en getByText te verkiezen boven getByTestId.

Question 3

Hoe test je de conditionele rendering van een element dat NIET aanwezig is in de DOM?

Accepted Answer

Gebruik queryBy om de afwezigheid van een element te verifiëren, aangezien het null retourneert in plaats van een fout te gooien. Voorbeeld: expect(screen.queryByText('Error')).toBeNull() of expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy zou een fout gooien en de test laten falen, terwijl findBy wacht tot het element verschijnt (timeout bij afwezigheid).

React Testen

Wat is het belangrijkste verschil tussen getBy, queryBy en findBy in React Testing Library?

Antwoord

Wat is het belangrijkste voordeel van getByRole ten opzichte van getByTestId?

Antwoord

Hoe test je de conditionele rendering van een element dat NIET aanwezig is in de DOM?

Antwoord

Waarom raadt React Testing Library aan om implementatiedetails NIET te testen?

Wat is het verschil tussen render en screen in React Testing Library?

Andere React / Next.js-sollicitatieonderwerpen

JavaScript-basisbegrippen

React-basisbegrippen

React Hooks

Componentlevenscyclus

React Router

Statusbeheer met Context

Formulieren & Controlled Components

Gegevens ophalen & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Fundamentals

TypeScript met React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigatie in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

Zustand State Management

React Performance-optimalisatie

Error Boundaries & Error Handling

Advanced React Patterns

Geavanceerde Next.js-functies

Next.js Deployment & Productie

Architecture & Design Patterns

React Server Components

Next.js Internationalisering

React Beveiliging & Best Practices

Beheers React / Next.js voor je volgende gesprek