Как протестировать компонент React с помощью useEffect и useRef

#reactjs #typescript #jestjs #react-hooks #enzyme

#reactjs #машинописный текст #jestjs #реагирующие хуки #фермент #typescript

Вопрос:

В моем компоненте есть такая логика, как:

 const testRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
  if (testRef.current) {
    doSomething();
  }
}, [testRef.current]);

итак, в модульном тестировании, как я мог бы вызвать изменение ссылки, чтобы можно было вызвать функцию внутри useEffect?

Ответ №1:

Чтобы запустить этот блок, вы ref должны быть в использовании. Предположим, что вы не используете это условно, что вы используете непосредственно в каком-то элементе, поэтому он уже запускается doSomething() при первом рендеринге. Вы можете использовать mount из Enzyme, так как shallow он плохо работает с хуками. Таким образом, вы сможете выполнить некоторое утверждение о том, что doSomething() делает ваш компонент.

1. Я думаю, проблема в том, как изменить значение ref, чтобы это могло вызвать useEffect; Я не уверен, существуют ли какие-либо похожие методы, такие как setProps() и setState(), которые можно было бы вызвать с помощью объекта shallow / mount

2.эффект использования также срабатывает при первом рендеринге компонента. Если вы уже используете его в каком-то элементе, он будет выполнять ваш doSomething stackblitz.com/edit/ref-useeffect?file=src/App.js

3. Большое вам спасибо, я пробовал разные способы выполнения теста. shallow не запускает внутреннюю функцию useEffect, возможно, как вы сказали, она плохо работает с hook; mount выдаст некоторую ошибку о дочернем элементе append, которая выглядит связанной с самим ref, в то время как покрытие составляет 100%, хотя тестовый пример не удался.