Criando os primeiros casos de testes com Jest DOM §

---

Os casos de teste no Jest DOM são construídos usando a função test ou it, proporcionando uma descrição do teste e uma função de callback que contém a lógica do teste.

it("should render the button with the text 'Load more'", () => {
	render(<Button text="Load more"/>);
	const button = screen.getByRole("button", { name: /load more/i });
	expect(button).toBeInTheDocument();
})

Importante

É uma boa prática sempre que possível obter um elemento da tela (screen) por meio de recursos de acessibilidade (tag/role, text, alt-text, etc).

Os grupos de testes são criados usando a função describe, que permite agrupar vários testes relacionados sob uma descrição comum.

describe('<Button />', () => {
	it("should render the button with the text 'Load more'", () => {
		render(<Button text="Load more"/>);
		const button = screen.getByRole("button", { name: /load more/i });
		expect(button).toBeInTheDocument();
	})
 
	// mais testes
});

Dica

Ao testar componentes React, geralmente, é adotado que no primeiro argumento (descrição) da função describe seja especificado o nome do componente, por exemplo, <Button \>. Isso facilita a identificação do erro de forma mais fácil.

A utilização de grupos de testes ajuda a organizar casos de teste relacionados, tornando o código mais legível e facilitando a execução seletiva de grupos específicos durante o desenvolvimento.

Após definir todos os casos de testes necessário basta executá-los usando o comando:

$ npx jest

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)