В моем компоненте реагирования у меня есть форма с реф. После нажатия кнопки «отправить», handleSubmitButtonClick
выполняется и нормально работает в браузере.
const formRef = useRef(null);
const handleSubmitButtonClick = async function() {
const form = formRef.current;
form['clientNumber'].setCustomValidity('invalid');
};
return (
<form className="needs-validation" ref={formRef} noValidate>
// ...
<input type="text" name="clientNumber" id="clientNumber" value="">
<button type="button" onClick={handleSubmitButtonClick}>Submit</button>
</form>
);
При написании теста (jest / энзим / jsdom) и нажатии кнопки вызывается метод как и ожидалось, но я получаю сообщение об ошибке.
test('should do something...', async () => {
const wrapper = mount(<MyComponent />);
const submitButton = wrapper.find('button').filterWhere((b) => b.text() === 'Submit');
submitButton.simulate('click');
// ...
});
TypeError: Cannot read property 'setCustomValidity' of undefined
> 1495 | form['clientNumber'].setCustomValidity('invalid');
Когда я отлаживаю в браузере форму и смотрю на коллекцию элементов, я вижу элементы в массиве, как и ожидалось:
При отладке теста form.elements отображается как «Прокси»:
Я не уверен, почему коллекция form.elements недоступна в тесте. Любая помощь будет оценена