# React Testing (React / Next.js)

> React Testing Library, Jest, Vitest, component testing, mocking, user interactions, coverage

- 20 interview questions
- Mid-Level
- [Interview Questions: React / Next.js](https://sharpskill.dev/en/technologies/react-next/interview-questions.md)

## 1. What is the main difference between getBy, queryBy and findBy in React Testing Library?

**Answer**

getBy throws an error if the element doesn't exist (synchronous assertions), queryBy returns null if the element doesn't exist (checking absence), and findBy returns a Promise for async elements. Use getBy by default for elements that must exist, queryBy to verify an element is not present, and findBy to wait for an element to appear after a delay.

## 2. What is the main advantage of getByRole over getByTestId?

**Answer**

getByRole encourages accessibility best practices by targeting elements by their semantic ARIA role (button, textbox, heading), which improves component accessibility for screen readers. getByTestId requires adding artificial data-testid attributes that provide no value to end users. React Testing Library recommends prioritizing getByRole, getByLabelText and getByText before getByTestId.

## 3. How to test the conditional rendering of an element that is NOT present in the DOM?

**Answer**

Use queryBy to verify an element's absence, as it returns null instead of throwing an error. Example: expect(screen.queryByText('Error')).toBeNull() or expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy would throw an error and fail the test, while findBy waits for the element to appear (timeout if absent).

## 17 more questions available

- Why does React Testing Library recommend NOT testing implementation details?
- What is the difference between render and screen in React Testing Library?

Sign up for free: https://sharpskill.dev/en/login

## Other React / Next.js interview topics

- [JavaScript Essentials](https://sharpskill.dev/en/technologies/react-next/interview-questions/javascript-essentials.md): 25 questions, Junior
- [React Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-fundamentals.md): 20 questions, Junior
- [React Hooks](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-hooks.md): 22 questions, Junior
- [Component Lifecycle](https://sharpskill.dev/en/technologies/react-next/interview-questions/component-lifecycle.md): 18 questions, Junior
- [React Router](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-router.md): 20 questions, Junior
- [State Management with Context](https://sharpskill.dev/en/technologies/react-next/interview-questions/state-management-context.md): 18 questions, Junior
- [Forms & Controlled Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/forms-controlled-components.md): 20 questions, Mid-Level
- [Data Fetching & API](https://sharpskill.dev/en/technologies/react-next/interview-questions/fetching-data-api.md): 20 questions, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-query-tanstack.md): 20 questions, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/en/technologies/react-next/interview-questions/styling-css-in-js.md): 18 questions, Mid-Level
- [Next.js Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 questions, Mid-Level
- [TypeScript with React](https://sharpskill.dev/en/technologies/react-next/interview-questions/typescript-react.md): 20 questions, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 questions, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 questions, Mid-Level
- [Next.js Routing & Navigation](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 questions, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 questions, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 questions, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 questions, Mid-Level
- [Zustand State Management](https://sharpskill.dev/en/technologies/react-next/interview-questions/zustand-state-management.md): 18 questions, Mid-Level
- [React Performance Optimization](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-performance-optimization.md): 22 questions, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-error-boundaries.md): 18 questions, Senior
- [Advanced React Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 questions, Senior
- [Next.js Advanced Features](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 questions, Senior
- [Next.js Deployment & Production](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 questions, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 questions, Senior
- [React Server Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-server-components.md): 26 questions, Senior
- [Next.js Internationalization](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 questions, Senior
- [React Security & Best Practices](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-security-best-practices.md): 22 questions, Senior

---

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