Gsap `.then()` callback func doesn't get triggered when running tests

[Hashira]

Hi there,

So I am using gsap for animation in a NextJs project and there are some component that has little animations that I am trying to test.

To be direct I stimulate a user click interaction in the test and check to see if the  "aria-*" attribute or "data-*" attribute has been updated to the correct state when the animation is done but all test fails. I am using the gsap `.then` callback to trigger this update when the animation is done.

It works fine in the dev and prod env but the `.then` callback function fails to run in a test env.

I have created a minimal demo of my issue, please find the link below
https://stackblitz.com/edit/stackblitz-starters-mvcff3?file=app%2Fpage.test.tsx


Thank you.

[Rodrigo]

Hi,

 

Sorry about the issues, but honestly I've never been to keen on unit testing, even less GSAP instances or effects of it, I just don't see the need for it, but that's just me.

 

I fiddled around with your demo and the issue here is that the test seems to run and finish before the GSAP instance is completed, I added a dummy test assertion:

expect("true").toMatch("true");

So the test will always succeed, and added this to the GSAP code:

console.log('click handler'); // <- YES
// Animate box
gsap
  .to(boxRef.current, {
  x: 120,
  rotation: 360,
  onStart: () => {
    console.log('tween started', Date.now());// <- YES
  },
  onComplete: () => {
    boxRef.current.setAttribute('data-animated', 'true');
    console.log('complete', Date.now()); // <- NO
  },
})
  .then(() => {
  console.log('THEN CALLBACK', Date.now()); // <- NO
});

So I see the first two logs in the terminal running the test but not the other two. That clearly means that the GSAP instance is not being completed in the test environment. I even tried returning the GSAP instance, expecting that returning the promise could work with the test but it didn't work. The fact that the onStart callback is working tells me that the test environment is running this code, the async/await is not waiting for the GSAP instance to be completed.

 

In fact running this on the test file:

// Stimulate user interactions
console.log("before", Date.now());// before 1714688301281
await user.click(screen.getByRole('button'));
console.log("AFTER", Date.now());// AFTER 1714688301370

// 1714688301370 - 1714688301281  = 89

As you can see only 89 milliseconds elapsed , while the GSAP instance has a default duration of 500 MS, that confirms that the test is not really waiting for the animation to be completed.

 

I wish I knew what the issue is here but is clearly not a GSAP related one, as far as I can see. Sorry I can't be of more assistance.

 

Happy Tweening!

[Hashira]

Thank you @Rodrigo

I have been able to solve the issue, but your explanation nudged me in the right direction on solving the issue.

Since I had to wait for GSAP instance to complete running. I was able to solve this by putting the test assertion in a waitFor function.

So by doing this
 

 await waitFor(() => {

            const element = screen.getByText("String")

 

            expect(element).toHaveAttribute("aria-current", "page")

        })

All test passed

[Rodrigo]

Hey, is great to hear that you were able to solve this. Honestly I never used Vitest before, the few times I worked with Jest and before that with Mocha and Chai.

 

Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity 💚

 

Happy Tweening!