1

Need a way to wait until all react callbacks have been processed for a react component

I am working on an interaction test for a react component. When I setup or update my app, the react component goes through a rendering cycle. So before I dispatch interaction events, I need wait for all the callbacks to be successfully processed and the component be settled. Is there is a good way to do such waiting in the test

Vikram Mohan
  • 86
  • 4

1 Answers1

2

I would use an async ComponentDidMount (Is using async componentDidMount() good?), and once all callbacks have completed successfully whatever they do, set a state variable (e.g. setupInProcess, which is initialized to true) to false.

render() will display 'setup in process' or 'loading' (and maybe also a spinner) as long as setupInProcess is true, and when it is set to false, will render whatever it is supposed to render.

Yossi
  • 5,577
  • 7
  • 41
  • 76
  • Thanks for your reply. Thats a good suggestion, however, componentDidMount executes once per lifecycle. Say a component is mounted and subsequently it updates based on user interactions. This gets even more complex when the rendering happens multiple times. How do I know when all the react rendering cycles are done and ready for the test to dispatch events and verify its state – Vikram Mohan Aug 21 '19 at 21:26
  • 1
    What is causing these updates when the component is already mounted? Other inputs that are independent of the application? Other application instances? User actions in this app instance? – Yossi Aug 22 '19 at 04:11
  • user actions mainly. Is there a way that I can wait for all the callbacks to be done ? – Vikram Mohan Aug 22 '19 at 14:38
  • There is no 'magic way' ;) I usually use redux with react native, and what I do is the following: when I start handling the user action, I set a state variable that indicates that something is in process. render checks this variable and knows that the data is being prepared. When I am done handling whatever I need to do, I either set this state variable to "ready" or to "error", and act accordingly. – Yossi Aug 22 '19 at 17:44
  • Thanks. You're spot on and that's one way of doing it. Also, do you have a recommendation on a best way for a system level test to flush out react rendering callbacks. Does setTimeout fit? – Vikram Mohan Aug 23 '19 at 21:09