3
respostas

[Dúvida] Meu teste ainda está falhando

Mesmo alterando o código do formulário, o segundo teste ainda continua falhando. No terminal dá isso aqui: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Meus códigos:

src > componentes > Formulario.tsx:

import React, { useRef, useState } from "react";

const Formulario = () => {
    const [nome, setNome] = useState("");
    const inputRef = useRef<HTMLInputElement>(null);

    const adicionarParticipante = (evento: React.FormEvent<HTMLFormElement>) => {
        evento.preventDefault();
        setNome('');
        inputRef.current?.focus();
    }

    return (
        <form onSubmit={evento => adicionarParticipante}>
            <input
                ref={inputRef}
                value={nome}
                onChange={evento => setNome(evento.target.value)}
                type="text"
                placeholder="Insira os nomes dos participantes"
            />
            <button disabled={!nome}>Adicionar</button>
        </form>
    );
}

export default Formulario;

e src > componentes > Formulario.teste.tsx:

import { fireEvent, render, screen } from "@testing-library/react"
import Formulario from "./Formulario";

// Jest: 
test('Quando o input está vazio, novos participantes não podem ser adicionados', () => {
    render(<Formulario />)

    // encontrar no DOM o input:
    const input = screen.getByPlaceholderText('Insira os nomes dos participantes');

    // encontrar o botão:
    const botao = screen.getByRole('button');

    // garantir que o input esteja no documento:
    expect(input).toBeInTheDocument();

    // garantir que o botão esteja desabilitado:
    expect(botao).toBeDisabled();
});

test('Como adicionar um participante caso exista um nome preenchido', () => {
    render(<Formulario />)

    // encontrar no DOM o input:
    const input = screen.getByPlaceholderText('Insira os nomes dos participantes');

    // encontrar o botão:
    const botao = screen.getByRole('button');

    // inserir um valor no input:
    fireEvent.change(input, {
        target: {
            value: 'Ana Catarina'
        }
    });

    // clicar no botão de submeter:
    fireEvent.click(botao);

    // garantir que o input esteja com o foco ativo:
    expect(input).toHaveFocus();

    // garantir que o input NÃO tenha um valor (seja uma string vazia):
    expect(input).toHaveValue("");
})
3 respostas

Oii, Mylena!

Você poderia colocar o seu código no github? Assim posso testar tendo todo o contexto.

Fico no aguardo.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Oie Lorena, vou colocar o link aqui! [https://github.com/MilyRibeiro/sorteador-amigo-secreto%5D]

Oii, Mylena!

Você deve ter encontrado o erro e corrigido, certo? Porque eu testei aqui o seu código e todos os testes passaram:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!