Minha solução
Componente Conta.js
const Conta = ({ saldo, realizarTransacao }) => {
const [valores, atualizarValores] = useState({transacao: '', valor: 0});
const disabledButton = valores.transacao === '' || valores.valor === 0
.....
<div>
<button disabled={disabledButton} type='submit'>
Realizar operação
</button>
</div>
Teste:
import React from "react";
import { render, screen, fireEvent } from '@testing-library/react';
import Conta from "./Conta";
describe('Testando transações', () => {
it('se tipo de transação e valor estiver vazio, não chamar a função', () => {
const mockRealizarTransacao = jest.fn()
render(<Conta saldo={1000} realizarTransacao={mockRealizarTransacao}/>)
const button = screen.getByRole('button', { name: /realizar operação/i })
fireEvent.click(button)
expect(mockRealizarTransacao).not.toHaveBeenCalled()
})
it('se tipo de transação e valor estiver preenchido, chamar a função', () => {
const mockRealizarTransacao = jest.fn()
render(<Conta saldo={1000} realizarTransacao={mockRealizarTransacao}/>)
const button = screen.getByRole('button', { name: /realizar operação/i })
const tipoTransacao = screen.getByRole('radio', { name: /depósito/i })
const inputValor = screen.getByTestId('valor')
fireEvent.click(tipoTransacao, {target: { value: 'deposito' }})
fireEvent.change(inputValor, {target: { value: 100 }})
fireEvent.click(button)
expect(tipoTransacao.value).toBe('deposito')
expect(inputValor.value).toBe("100")
expect(mockRealizarTransacao).toHaveBeenCalled()
})
})