元素消失测试超时

Question

我正在尝试用 react-testing-library 测试元素的消失。元素是 antd 的 Spin。

我有一个连接到 redux 存储的容器 SpinnerContainer.js，还有一个组件 Spinner.js 来呈现结果。

当安装 SpinnerContainer 时，它会调度操作 FETCH_USER 并在成功时 returns 值并将加载 state 设置为 false，这将删除加载图标。

问题是 react-testing-library 的 waitForElementToBeRemoved 超时。

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

元素消失测试超时

Test for disappearance of element times out

unit-testing

reactjs

jestjs

react-testing-library