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

Question

I do have a SplashContainer with a async componentDidMount

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);

I do have two questions here.

1 . I wanted to test setTokenAvalability and getUserDetails is been dispatched or not. I do know how to test if there is no async/await, like below.

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 . How to stub value for AsyncStorage.getItem()

Thanks,

Answer 1

Well, componentDidMount is not an async function, the only thing you can do here I think is to use the componentDidUpdate method which will give you an update of your component.

Reading the this.props.navToNextScreen() function, I think you misunderstand how redux works here.

You probably don't need to wait for the navToNextScreen function, it should just send a global event and your main component should listen to a change in your store to show / hide your Splash screen