Test async function in React with Enzyme

Question

I have component, where i apply styles to the component with async function, and i need to cover this function with Enzyme test.

const SpinnerKf = new Keyframes.Spring({
  loading: async (next: Object) => {
    await next(getCircleStyles(0.5, '#fff'))
    await next(getCircleStyles(34, styles.colorSuccess))
  }
})

export class Spinner {
   ...

   render () {
     <SpinnerKf>...</SpinnerKf>   
   }
}

How can I check with Enzyme, that function in the second await return correct color (second argument in getCircleStyles )? When i check color on SpinnerKf , it's return only #fff (color from the first await), but I need to check second await too.

Thanks for any help.

Answer 1

You could jest.mock the Keyframes . I'm not sure where you import it from, but if you mock everything down to the loading function and pass in a spy next function, you can assert the colors pass to next .

Animations are tricky to test, and thorough testing would involve a lot of mocking. It could not be for it.