Какие тесты следует провести для хука useDebounce?

Question

[lexstile]

Есть хук:

export const useDebounce = (value: any, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

Какие обязательные тесты для него нужно написать?
Возможно, есть примеры на jest? (был бы очень признателен)

Comments

[WbICHA]

Для дебоунса стоит написать тесты проверки работоспособности дебоунса.

[WbICHA]

Кстати, потрясающая типизация.

[Антон Горецкий]

можно пример кода с полезным применением этого хука?

[Alexandroppolus]

Антон Горецкий, например, для передачи отложенного значения в пропсы компонента, в котором по этому значению делается запрос на сервер. Или для запроса через useQuery (который в React Query). Исходное неотложенное значение - из какого-нибудь текстового инпута, и дожидаемся "окончания ввода".

[Антон Горецкий]

Alexandroppolus, я не спрашивал для чего нужен Debounce. Я просил конкретный пример полезного применения данного автором кода. Пример применения - это почти готовый тест. Я вот не вижу как это можно применить в рабочем коде, может быть потому, что я знаю, что Debounce - это декоратор.

[Alexandroppolus]

Антон Горецкий, ну так я и привел примеры именно для данного хука. Debounce в чистом виде это конечно хорошо, но прикручивать его к этим примерам придется за тот же десяток строк.

[lexstile]

Антон Горецкий,

[lexstile]

Alexandroppolus, вы все верно сказали, как раз для react-query и нужно.

[Антон Горецкий]

lexstile, Понятно, как я и думал. Весь ваш Debounce работает на том факте, что useQuery кеширует запросы.

[Alexandroppolus]

Антон Горецкий, не понял, как одно с другим связано.

[lexstile]

Антон Горецкий, получается, что можете не переживать, т. к. программистами без опыта не становятся - всегда будут те, кто хорошо разбирается, наработав опыт; и всегда будут те, кто этот опыт нарабатывает.
Извините, но какое-то сравнение школьных годов, ну максимум первых курсов универа)

[Alexandroppolus]

lexstile, если что, этот воинствующий джун ничего внятного тут не написал (как минимум, предельно очевидно, что сабжевый хук ни коим образом не связан с кэшированием useQuery, да и вообще с useQuery). Просто чел позавчера открыл для себя декораторы и от радости снесло крышу.

[Модератор]

lexstile, см.п.3.8

[lexstile]

Модератор, в теле вопроса так и сделал.
Иногда нужно, чтобы код не индексировался поисковыми системами, поэтому привёл в виде изображения.

[Модератор]

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

[lexstile]

Модератор, а как предоставлять код с удаленной машины, где любые пересылки запрещены СБ, подскажите тогда?

[Алан Гибизов]

lexstile, ну вот, вы ещё и ИБ нарушаете :)

[lexstile]

Алан Гибизов, нет, есть определенные требования. Небольшой кусок кода не запрещается публиковать. Но возможность копирования отключена.

Answer 1

[Alexandroppolus]

Навскидку - проверить 4 поинта:
1) Стартовое значение доступно сразу
2) Переустановка значения по таймеру (то есть на моменте delay-epsilon оно старое, а на delay+epsilon уже новое)
3) Проверить, что если до окончания таймаута для значения v2 пришло ещё новое значение v3, таймер перезапускается, значение остается v1, по таймеру будет v3. В общем, что это debounce.
4) Сброс таймера при размонтировании компонента.

в дополнение к jest используй renderHook из @testing-library/react-hooks

и типизацию сделай по-человечески, с помощью генерика.

Comments

[lexstile]

Спасибо большое, за советы с типизацией в том числе.