Question

我确实有一个带有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()

的值

谢谢，

Answer 1

好吧，componentDidMount不是异步函数，我认为你唯一能做的就是使用componentDidUpdate方法，它会为你提供组件的更新。

阅读this.props.navToNextScreen()函数，我认为你误解了redux如何在这里工作。

您可能不需要等待navToNextScreen功能，它应该只发送一个全局事件，您的主要组件应该收听商店中的更改以显示/隐藏您的启动画面

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

1 个答案: