Exercícios de Fixação – Aula 13 🧪

Exercício 01: Primeiro Teste

Instale o Vitest e o React Testing Library. 1. Crie um componente Titulo que apenas exibe um h1 com o texto "Olá Mundo". 2. Escreva um teste que verifica se o texto "Olá Mundo" está presente no documento.

Exercício 02: Testando Props

Crie um componente Card que recebe a prop nome. 1. Escreva um teste que passa um nome específico e verifica se ele é renderizado corretamente. 2. Use o screen.getByText com uma Expressão Regular (Regex) para ser insensível a maiúsculas/minúsculas.

🟡 Nível: Intermediário

Exercício 03: Testando Interação (Clique)

Crie um componente Contador. 1. O valor inicial deve ser 0. 2. Ao clicar no botão "Aumentar", o valor deve ir para 1. 3. Use o fireEvent.click ou userEvent.click para simular o clique no teste.

Exercício 04: Testando Estado Condicional

Crie um componente Mensagem que tem um botão de "Mostrar/Esconder". 1. Escreva um teste que verifica que a mensagem está oculta por padrão. 2. Simule o clique e verifique se a mensagem apareceu. 3. Verifique se ela some ao clicar novamente.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Crie um componente `Titulo` que apenas exibe um `h1` com o texto "Olá Mundo".
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();

// Solução de referência para: Escreva um teste que verifica se o texto "Olá Mundo" está presente no documento.
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();

// Solução de referência para: Escreva um teste que passa um nome específico e verifica se ele é renderizado corretamente.
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();

// Solução de referência para: Escreva um teste que verifica que a mensagem está oculta por padrão.
function solucaoExercicio() {
    console.log("Executando validação de: Testes Unitários: Vitest e React Testing Library");
    return true;
}

solucaoExercicio();