Keskitaso🧪 Testaus

React-komponentin testaus

Kirjoita testit React-komponentille.

Prompti

Kirjoita testit seuraavalle React-komponentille.

Komponentti:
[KOODI]

Testaustyökalut: React Testing Library, [FRAMEWORK]

Testaa:
- Renderöinti oikein
- Käyttäjäinteraktiot
- Props-muutokset
- Tilanhallinta
- Accessibility

Käytä user-centric testausperiaatteita.

Suomenkieliset vinkit

Voit sekoittaa suomea ja englantia — teknisiä termejä ei tarvitse kääntää
Claude ymmärtää suomea erityisen hyvin muihin malleihin verrattuna
Testikuvaukset suomeksi auttavat koko tiimiä ymmärtämään testien tarkoituksen

Muuttujat

Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:

[KOODI]
[FRAMEWORK]

Esimerkki

Täytetty prompti

Kirjoita testit seuraavalle React-komponentille.

Komponentti:
function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email || !password) {
      setError('Täytä kaikki kentät');
      return;
    }
    onSubmit({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <p role="alert">{error}</p>}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Sähköposti"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Salasana"
      />
      <button type="submit">Kirjaudu</button>
    </form>
  );
}

Testaustyökalut: React Testing Library, Jest

Testaa:
- Renderöinti oikein
- Käyttäjäinteraktiot
- Props-muutokset
- Tilanhallinta
- Accessibility

Käytä user-centric testausperiaatteita.