Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RoyM

jest testing gsap w/react hooks

Recommended Posts

Are there some good examples of testing react hooks with gsap code? I found some older threads on the topic, but got the sense that the Greensock folks seem to prefer the older style (React Classes). Happy to post some examples of my attempts if that helps.

Link to post
Share on other sites

Over-testing can become an issue more than a problem and I don't recommend testing for example whether or not s GSAP instance is running, or if the target of the GSAP instance was moved to this or that position, rotated or it's opacity changed. The core functionality of an library/framework/app is responsibility of the team that writes that particular code, not the people that uses it. If GSAP does or doesn't do what is supposed to do, the GSAP team should run their own tests to ensure that to the users. In the same way your duty as a developer is to ensure that your apps work the way your clients ask.

 

My advice is to test state/props updates, api calls returning the expected data, etc., and that the side effects of those are actually triggered. Testing what those side effects do is, IMHO, a waste of time and make writing tests even more complex that writing the code itself. I've seen cases were actually writing tests becomes more painful than writing the app which is pure nonsense.

 

With that preface out of the way, the question would be: What exactly you want to test?

  • Like 1
Link to post
Share on other sites

That's good advice.. my use case is that I have a complex sequence of animations with nested timelines.. kinda like Siggy's tutorial at https://academy.siggyworks.com/p/web-animation-with-svg-and-greensock  and wanted to assert the final state of an svg element. If I could just see an example of how to test the simplest thing, such as that a box is now at 100, 0 (from 0,0).. that would be helpful. My thought is that once you have a complex animation, you should be able to inject/modify the logic and not have to re-run the whole animation to verify your changes, so a way to compress the timeline or mock timers would be needed. thanks

Link to post
Share on other sites

Hi,

 

This is exactly the type of things I don't test, because if you change the target file, you have to change your assertions and perhaps in different screen sizes you'll have different values, so you'll end up testing in a real browser no matter what. Also is quite logical that you don't want to wait the amount of time the animation, because of that you need to set up a specific duration depending on the process environment, which means either add a conditional logic for every GSAP instance you want to test or create a new master timeline with the main root GSAP instance and set it's duration to 0.1 second or something like that. Then you'd have to get the styles of the element (or perhaps attributes values if you're using the attribute plugin for the SVG elements) and compare them to what you expect them to be.

 

Normally I use the React Testing Library https://testing-library.com/docs/react-testing-library/intro but I run tests for API calls, state and props updates, nothing more than that. Perhaps @elegantseagulls runs tests for GSAP instances, like I said in my previous post, unless my client forces me to do so (no one has so far) I don't run such tests and I don't plan to do it in the near future.

 

Finally you can easily add tests in a codesandbox. Just remember to install the react testing library dependencies:

 

https://codesandbox.io/docs/tests

 

Happy Tweening!!!

  • Like 2
Link to post
Share on other sites

I haven't done any jest testing for GSAP in React Hooks, but basically only use hooks for my animations. I've not found any significant performance issues, unless I'm trying to tween more than a few hundred elements at a time, on 'load/mount/callback/etc'.

  • Like 3
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×