Mesmo alterando o código do formulário, o segundo teste ainda continua falhando. No terminal dá isso aqui:
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("");
})