Question 1

Qual é a principal diferença entre getBy, queryBy e findBy no React Testing Library?

Accepted Answer

getBy lança um erro se o elemento não existir (assertions síncronas), queryBy retorna null se o elemento não existir (verificar ausência), e findBy retorna uma Promise para elementos assíncronos. Use getBy por padrão para elementos que devem existir, queryBy para verificar que um elemento não está presente, e findBy para aguardar o aparecimento de um elemento após um delay.

Question 2

Qual é a principal vantagem de getByRole em relação a getByTestId?

Accepted Answer

getByRole incentiva boas práticas de acessibilidade ao buscar elementos pelo seu papel ARIA semântico (button, textbox, heading), o que melhora a acessibilidade do componente para leitores de tela. getByTestId requer a adição de atributos data-testid artificiais que não trazem valor para o usuário final. React Testing Library recomenda priorizar getByRole, getByLabelText e getByText antes de getByTestId.

Question 3

Como testar a renderização condicional de um elemento que NÃO está presente no DOM?

Accepted Answer

Use queryBy para verificar a ausência de um elemento, pois ele retorna null em vez de lançar um erro. Exemplo: expect(screen.queryByText('Error')).toBeNull() ou expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy lançaria um erro e falharia o teste, enquanto findBy aguarda o elemento aparecer (timeout se ausente).

Testes em React

Qual é a principal diferença entre getBy, queryBy e findBy no React Testing Library?

Resposta

Qual é a principal vantagem de getByRole em relação a getByTestId?

Resposta

Como testar a renderização condicional de um elemento que NÃO está presente no DOM?

Resposta

Por que o React Testing Library recomenda NÃO testar detalhes de implementação?

Qual é a diferença entre render e screen no React Testing Library?

Outros temas de entrevista React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Formulários e Controlled Components

Busca de dados e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos do Next.js

TypeScript com React

Data Fetching no Next.js

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Metadata & SEO no Next.js

Middleware e Auth no Next.js

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

Internacionalização do Next.js

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista