This content originally appeared on DEV Community and was authored by Vitor Rios
No contexto de testes com Jest, especialmente ao testar componentes React usando @testing-library/react, você pode encontrar várias funções de consulta com diferentes prefixos, como getBy..., findBy... e queryBy.... Cada uma dessas funções serve a um propósito específico e entender suas diferenças pode ajudar a escrever testes mais eficazes e robustos.
getBy...
Uso
A função getBy... é usada para selecionar elementos que devem estar presentes no DOM.
Comportamento
Se o elemento não for encontrado, getBy... lança um erro imediatamente. Isso é útil quando você espera que o elemento esteja no DOM após a renderização inicial.
Exemplos
const button = screen.getByText('Submit');
const input = screen.getByPlaceholderText('Enter your name');
Quando Usar
Use getBy... quando você espera que o elemento esteja no DOM imediatamente após a renderização inicial do componente.
Exemplo de Teste com getBy...
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders submit button', () => {
render(<MyComponent />);
const button = screen.getByText('Submit');
expect(button).toBeInTheDocument();
});
findBy...
Uso
A função findBy... é usada para selecionar elementos que podem aparecer no DOM de forma assíncrona.
Comportamento
Retorna uma Promise que é resolvida quando o elemento é encontrado. Se o elemento não for encontrado dentro de um tempo padrão (1 segundo), a Promise é rejeitada.
Exemplos
const button = await screen.findByText('Submit');
const input = await screen.findByPlaceholderText('Enter your name');
Quando Usar
Use findBy... quando o elemento pode não estar presente imediatamente e pode aparecer depois de alguma operação assíncrona, como uma chamada de API ou uma animação.
Exemplo de Teste com findBy...
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders submit button asynchronously', async () => {
render(<MyComponent />);
const button = await screen.findByText('Submit');
expect(button).toBeInTheDocument();
});
queryBy...
Uso
A função queryBy... é usada para selecionar elementos que podem ou não estar presentes no DOM.
Comportamento
Retorna null se o elemento não for encontrado, ao invés de lançar um erro.
Exemplos
const button = screen.queryByText('Submit');
const input = screen.queryByPlaceholderText('Enter your name');
Quando Usar
Use queryBy... quando você quer verificar a ausência de um elemento no DOM. É útil para testar condições negativas.
Exemplo de Teste com queryBy...
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('does not render submit button initially', () => {
render(<MyComponent />);
const button = screen.queryByText('Submit');
expect(button).not.toBeInTheDocument();
});
Conclusão
A escolha entre getBy..., findBy... e queryBy... depende do comportamento esperado do componente que você está testando. Usar a função adequada pode tornar seus testes mais robustos e claros, além de evitar falsos positivos ou falhas desnecessárias. Compreender essas diferenças é crucial para escrever testes eficazes e manter a qualidade do seu código.
Agora que você entende como essas funções de consulta funcionam, pode aplicá-las corretamente em seus testes, garantindo que seus componentes React sejam testados de forma abrangente e eficiente.
This content originally appeared on DEV Community and was authored by Vitor Rios
Vitor Rios | Sciencx (2024-06-20T22:52:13+00:00) Entendendo as Nomenclaturas getBy…, findBy… e queryBy… no Jest. Retrieved from https://www.scien.cx/2024/06/20/entendendo-as-nomenclaturas-getby-findby-e-queryby-no-jest/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.