Я изучаю TDD и пытаюсь писать тесты, следуя лучшим практикам в моих проектах. Как правило, я пишу интерфейс на React и во время обучения нашел отличную публикацию о тестировании с использованием библиотеки response-testing от Робина здесь . Я буду использовать примеры с сайта Робина, но другие примеры, которые я нашел в сети, также похожи. Итак, один из компонентов, который выполняет поиск по вводу пользователя, выглядит так:
function Search({ value, onChange, children }) {
return (
<div>
<label htmlFor="search">{children}</label>
<input
id="search"
type="text"
value={value}
onChange={onChange}
/>
</div>
);
}
Типичный тестовый пример для этого выглядит так:
describe('Search', () => {
test('calls the onChange callback handler', () => {
const onChange = jest.fn();
render(
<Search value="" onChange={onChange}>
Search:
</Search>
);
fireEvent.change(screen.getByRole('textbox'), {
target: { value: 'JavaScript' },
});
expect(onChange).toHaveBeenCalledTimes(1);
});
});
Мои вопросы:
- Разве мы не можем просто вручную протестировать этот (или аналогичный ios) сценарий?
- Разве не просто и интуитивно понятно go в браузере и проверить, работает ли компонент, как есть предполагается, с помощью нескольких щелчков мышью и ввода?
Единственный недостаток, который я имею в виду, - это то, что для повторения теста мне нужно снова сделать несколько кликов.
Похоже на излишество - издеваться над apis, обратными вызовами и т.д. c просто для проверки того, что компонент отображает его после определенного действия пользователя.
Конечно, мне что-то здесь не хватает. Приветствуются любые разъяснения.