Bileşen Testi — Sınıf Adı Değişti, Test Neden Kırıldı?

1
import { useState } from 'react';
2

3
interface Props {
4
  onSend: (iban: string, amount: number) => Promise<void>;
5
}
6

7
export function TransferForm({ onSend }: Props) {
8
  const [iban, setIban] = useState('');
9
  const [amount, setAmount] = useState('');
10
  const [message, setMessage] = useState('');
11

12
  async function submit(event: React.FormEvent) {
13
    event.preventDefault();
14
    const value = Number(amount);
15
    if (!amount || value <= 0) {
16
      setMessage('Tutar girin.');
17
      return;
18
    }
19
    await onSend(iban, value);
20
    setMessage('Havale gönderildi.');
21
  }
22

23
  return (
24
    <form onSubmit={submit}>
25
      <label htmlFor="iban">Alıcı IBAN</label>
26
      <input id="iban" value={iban} onChange={(e) => setIban(e.target.value)} />
27

28
      <label htmlFor="amount">Tutar (TL)</label>
29
      <input id="amount" inputMode="decimal" value={amount} onChange={(e) => setAmount(e.target.value)} />
30

31
      <button type="submit" className="send-button">Gönder</button>
32
      <p role="status">{message}</p>
33
    </form>
34
  );
35
}

1
import { render, screen } from '@testing-library/react';
2
import userEvent from '@testing-library/user-event';
3
import { expect, it, vi } from 'vitest';
4
import { TransferForm } from './TransferForm';
5

6
it('sends the transfer and says so', async () => {
7
  const user = userEvent.setup();
8
  const onSend = vi.fn().mockResolvedValue(undefined);
9
  render(<TransferForm onSend={onSend} />);
10

11
  await user.type(screen.getByLabelText('Alıcı IBAN'), 'TR330006100519786457841326');
12
  await user.type(screen.getByLabelText('Tutar (TL)'), '500');
13
  await user.click(screen.getByRole('button', { name: 'Gönder' }));
14

15
  expect(await screen.findByText('Havale gönderildi.')).toBeVisible();
16
  expect(onSend).toHaveBeenCalledWith('TR330006100519786457841326', 500);
17
});
18

19
it('does not send without an amount', async () => {
20
  const user = userEvent.setup();
21
  const onSend = vi.fn();
22
  render(<TransferForm onSend={onSend} />);
23

24
  await user.click(screen.getByRole('button', { name: 'Gönder' }));
25

26
  expect(screen.getByRole('status')).toHaveTextContent('Tutar girin.');
27
  expect(onSend).not.toHaveBeenCalled();
28
});

1
// Tempting, but look what happens: the test knows class names, not behaviour.
2
it('sends when the button is clicked', () => {
3
  const onSend = vi.fn();
4
  const { container } = render(<TransferForm onSend={onSend} />);
5

6
  fireEvent.change(container.querySelector('#amount')!, { target: { value: '500' } });
7
  fireEvent.click(container.querySelector('.btn-send')!); // breaks when the class is renamed
8

9
  expect(onSend).toHaveBeenCalled(); // never tries an empty amount, so that bug stays green
10
});