RESPOSTA DO DESAFIO

Fala, Uder!

Desculpa pela demora.

O primeiro passo para completar o desafio é desabilitar o botão quando valores.transacao e valores.valor não forem valores verdadeiros (truthy).

<button disabled={!(valores.transacao && valores.valor)}>
  Realizar operação
</button>

Agora o teste deve falhar, pois a funcaoRealizarTransacao não será chamada. Você já pode tornar esse teste seu teste de que a função não deve ser chamada se os campos não possuírem os valores, para isso você precisa corrigir a mensagem do teste e adicionar .not. antes de toHaveBeenCalled().

Agora ao teste de que, se os valores existirem, o botão deve estar habilitado e a função deve ser chamada.

A estrutura é basicamente a mesma, exceto que precisamos disparar outros dois eventos, para preencher os campos de input.

render(<Conta saldo={1000} realizarTransacao={funcaoRealizarTransação} />)

fireEvent.click(screen.getByLabelText('Depósito'))
fireEvent.change(screen.getByTestId('valor'), { target: { value: 100 } })

fireEvent.click(screen.getByText('Realizar operação'));
expect(funcaoRealizarTransação).toHaveBeenCalled()

Então antes de realizar a operação, e depois de criar o componente em tela, clicamos na opção de Depósito, e preenchemos o input de Valor com o valor 100.

Agora a função deve ter sido chamada.

Uma observação é que hoje há práticas melhores para imitar comportamentos do usuário, como preenchimento de campos, e você pode ver mais sobre a biblioteca user-events aqui. Entretanto, seguindo o que foi mostrado no curso, você pode fazer como acima mesmo e irá funcionar!

Bons estudos!