如何在 React Native 中测试异步 ComponentDidMount？答案

【问题标题】：How to test a async ComponentDidMount in React Native?如何在 React Native 中测试异步 ComponentDidMount？
【发布时间】：2017-03-02 07:41:47
【问题描述】：

我确实有一个带有 async componentDidMount 的 SplashContainer

export class SplashContainer extends Component {

  async componentDidMount() {
    let token = await AsyncStorage.getItem('@XXX:token')
    if (token !== null) {
      await this.props.setTokenAvalability(true)
      await this.props.getUserDetails()
    }
    await this.props.navToNextScreen()
  }

  render() {
    return <Splash />
  }
}

function mapDispatchToProps(dispatch) {
  return {
    navToNextScreen: () => dispatch(navToNextScreen(...)),
    setTokenAvalability: (status) => dispatch(setTokenAvalability(status)),
    getUserDetails: () => dispatch(getUserDetails()),
  }
}
export default connect(null, mapDispatchToProps)(SplashContainer);

我确实有两个问题。

1。我想测试setTokenAvalability and getUserDetails 是否已发送。我确实知道如何测试是否没有 async/await，如下所示。

it('test SplashContainer', () => {
  const store = mockStore({});
  const props = {
    dispatch: store.dispatch
  }
  const tree = renderer.create(
    <SplashContainer {...props}/>
  ).toJSON();
  const expectedAction = [
    ...
  ]
  expect(store.getActions()).toEqual(expectedAction);
});

2。如何为AsyncStorage.getItem() 存根值

谢谢，

【问题讨论】：

标签： javascript reactjs react-native jestjs async.js

【解决方案1】：

嗯，componentDidMount 不是一个异步函数，我认为你在这里唯一能做的就是使用componentDidUpdate 方法，它可以让你更新你的组件。

看了this.props.navToNextScreen()函数，我想你误解了redux在这里的工作原理。

您可能不需要等待 navToNextScreen 函数，它应该只发送一个全局事件，并且您的主要组件应该监听商店中的更改以显示/隐藏您的启动屏幕

【讨论】：