vendredi 27 janvier 2017

Testing asynchronous React state changes

I have a React component for an onboarding process for my app. It has 5 consecutive screens, and I want to write a test that starts at the first screen and verifies that it can indeed click through all 5 screens.

I'm using react-router to handle state changes, and I'm guessing a lot of what it does is probably asynchronous because just doing a TestUtils.Simulate.Click is insufficient to trigger a DOM update.

I tried

click();
return Promise.resolve().then(() => {
  // check for screen here
});

but this doesn't work either, and only setTimeout + done seems to work for me, so I ended up with this monstrosity, where actions is an array of functions that in turn, click the 'next' button on my onboarding screen, and verify that they're at the right screen.

const chain = (actions: Function[]) => {
    Array(actions.length).fill(0).forEach((_, i) => setTimeout(actions[i], 20 * (i + 1)));
    setTimeout(done, (actions.length + 1) * 20);
};

is there a better way of doing this?

Aucun commentaire:

Enregistrer un commentaire