Тест на исчезновение тайм-аута элемента

Question

Я пытаюсь проверить исчезновение элемента с помощью react-testing-library. Элемент имеет значение Spin из antd.

. У меня есть контейнер SpinnerContainer.js, который подключается к хранилищу резервов, и компонент Spinner.js для отображения результата.

Когда SpinnerContainer монтируется, отправляет действие FETCH_USER и при успешном завершении возвращает значение и устанавливает загрузку state в значение false, что удаляет значок загрузки.

Проблема в waitForElementToBeRemoved из react-testing-library тайм-аутов.

SpinnerContainer.js

state = {
  loading: false
};

componentDidMount() {
   this.setState({
     loading: true
   });

   this.callToSaga();
}

callToSaga() {
  const { dispatch } = this.props;

    new Promise((resolve, reject) => {
      dispatch({
        type: actions.FETCH_USER,
        resolve,
        reject
      });
    }).then(response => {
      console.log(response);
      this.setState({ loading: false });
    }).catch(error => console.log(error);
}

Но если я не отправлю действие для вызова FETCH_USER и изменения загрузки state. Тест пройден.

SpinnerContainer.js

// Without call to saga

state = {
  loading: true
};

componentDidMount() {
   setTimeout(() => {
     this.setState({
       loading: false
     });
  }, 200)
}

Я сделал демо в кодовой песочнице: https://codesandbox.io/s/cool-wildflower-012lj?from-embed

Любая помощь будет принята с благодарностью .

Answer 1

Я решил проблему. Проблема была с созданием магазина для тестирования. После того, как я создал магазин с applyMiddleware(sagaMiddleware), проблема была исправлена.

SpinnerContainer.test.js

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(saga);

Я обновил песочницу с кодом: https://codesandbox.io/s/cool-wildflower-012lj?from-embed