tg-me.com/React_lib/632
Create:
Last Update:
Last Update:
Лучшие практики для написания тестов с использованием 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
BY React
Share with your friend now:
tg-me.com/React_lib/632