Как протестировать ловушку useEffect с использованием часов Jasmine для макетирования времени setTimeout - PullRequest
Новая
       2

Как протестировать ловушку useEffect с использованием часов Jasmine для макетирования времени setTimeout

0 голосов
/ 19 февраля 2020

Я не могу понять, как использовать jasmine.clock () для насмешки над setTimeOut в моем хуке useEffect.

По сути, я делаю некоторую проверку в простом компоненте. Для оптимизации я хочу проверить свою ценность только после некоторой задержки. Поэтому я проверяю некоторое значение debounceValue вместо реального значения. 

const [debouncedValue, setDebouncedValue] = React.useState(props.value);
const [isValid, setIsValid] = React.useState(true);

React.useEffect(() => {
    setTimeout(() => {
        setDebouncedValue(props.value);
    }, 300);
}, [props.value]);

React.useEffect(() => {
    setIsValid(props.validate?.(debouncedValue));
}, [debouncedValue]);

Все работает, как и ожидалось, значение входного значения проверяется только через 300 миллисекунд.

, но у меня много Трудно проверить это новое поведение.

Для тестирования наших компонентов мы используем Жасмин и Фермент. Поэтому я пытаюсь использовать функцию jasmine.clock () -> https://jasmine.github.io/api/2.7/Clock.html

Почему-то это не работает, когда мы используем setTimeout в хуке useEffect, как в этом примере.

Это мой текущий тест: 

jasmine.clock().install();
const validation = (value: string) => value !== '';
const validationMessage = 'invalid value';
const invalidValue = '';
hookWrapper = mount(
<TextArea
id="textarea-id"
validate={validation}
validationMessage={validationMessage}
value="valid value"
/>
);
// so here i'm mounting valid component that is wrapped with
act(() => {
    hookWrapper.mount();
    hookWrapper.setProps({value: invalidValue});
    jasmine.clock().tick(400);
    hookWrapper.update();
});

expect(hookWrapper.contains(invalidValue)).toBeTruthy();
jasmine.clock().uninstall();

Когда я удаляю логи debounceValue c и jasmine.clock (), тест работает без проблем.

Так что моя проблема на самом деле заключается в использовании jasmine.clock () для насмешки над setTimeout внутри хука useEffet.

...