Лучшие практики для написания тестов с использованием React Testing Library

В статье рассматриваются способы повышения качества тестов, написанных с использованием React Testing Library. Автор делится практическими советами, которые помогут вам писать более надежные и поддерживаемые тесты. Среди ключевых моментов:

- Как избегать тестирования реализаций и сосредотачиваться на поведении компонентов.
- Почему важно работать с пользовательскими событиями вместо прямого взаимодействия с DOM.
- Использование ARIA-атрибутов для более точного поиска элементов.

Эти подходы помогают создавать тесты, которые лучше отражают реальное использование компонентов и упрощают их сопровождение.

export const Form = ({ saveData }) => {
  const [state, setState] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    conditionsAccepted: false,
  });

  const onFieldChange = (event) => {
    let value = event.target.value;
    if (event.target.type === "checkbox") {
      value = event.target.checked;
    }

    setState({ ...state, [event.target.id]: value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    saveData(state);
  };

  return (
    <form className="form" onSubmit={onSubmit}>
      <div className="field">
        <label>Name</label>
        <input
          id="name"
          onChange={onFieldChange}
          placeholder="Enter your name"
        />
      </div>
      <div className="field">
        <label>Email</label>
        <input
          type="email"
          id="email"
          onChange={onFieldChange}
          placeholder="Enter your email address"
        />
      </div>
      <div className="field">
        <label>Password</label>
        <input
          type="password"
          id="password"
          onChange={onFieldChange}
          placeholder="Password should be at least 8 characters"
        />
      </div>
      <div className="field">
        <label>Confirm password</label>
        <input
          type="password"
          id="confirmPassword"
          onChange={onFieldChange}
          placeholder="Enter the password once more"
        />
      </div>
      <div className="field checkbox">
        <input type="checkbox" id="conditions" onChange={onFieldChange} />
        <label>I agree to the terms and conditions</label>
      </div>
      <button type="submit">Sign up</button>
    </form>
  );
};

https://claritydev.net/blog/improving-react-testing-library-tests

✍️ @React_lib