Jest testing with ScrollTrigger.matchMedia

[ovalman]

Looking for some assistance with jest testing. Any help is greatly appreciated.

 

I've got the following code which I originally did not have inside ScrollTrigger.matchMedia and had working tests.

ScrollTrigger.matchMedia({

"(min-width: 768px) and (max-height: 1099px)": function() {

ScrollTrigger.create({

trigger: containerWrapper,

scrub: true,

pin: true,

anticipatePin: 1,

start: "center center",

end: ScrollTriggerPaddingBottom,

markers: false,

onEnter: () => {

handleOnSlideEntered(document, element);

containerWrapper.classList.add("scroll-animation-content-active");

},

onEnterBack: () => {

handleOnSlideEnteredBack(document, element);

containerWrapper.classList.add("scroll-animation-content-active");

},

onUpdate: self => {

animation.goToAndStop(self.progress * (animation.totalFrames - 1), true)

},

onLeave: (elements, triggers) => {

containerWrapper.classList.remove("scroll-animation-content-active");

containerWrapper.classList.remove("scroll-animation-content-active-fast");

},

onLeaveBack: (elements, triggers) => {

handleOnSlideEnteredBack(document, element);

containerWrapper.classList.remove("scroll-animation-content-active");

containerWrapper.classList.remove("scroll-animation-content-active-fast");

}

})

}

});

 

And here are my tests that I'm having a difficult time figuring out how to get working:

const createSpy = jest.fn().mockImplementation((obj) => {

obj.onEnter();

obj.onEnterBack();

obj.onUpdate({progress: 1});

obj.onLeave();

obj.onLeaveBack();

});

 

const matchMediaSpy = jest.fn();

 

global.window.ScrollTrigger = {

create: createSpy,

matchMedia: matchMediaSpy

};

global.window.gsap = {

registerPlugin: registerPluginSpy

};

 

expect(createSpy).toHaveBeenCalledWith({

trigger: expect.any(Object),

scrub: true,

pin: true,

anticipatePin: 1,

start: "center center",

end: "+=500",

markers: false,

onEnter: expect.any(Function),

onEnterBack: expect.any(Function),

onLeave: expect.any(Function),

onLeaveBack: expect.any(Function),

onUpdate: expect.any(Function)

});

expect(addSpy).toHaveBeenCalled();

[ZachSaucier]

Hey ovalman and welcome to the GreenSock forums. 

 

I don't know of any regulars who test the animation part of their code with Jest so I'm not sure if you'll receive much aid here. With that being said if you have any GSAP-related questions please ask and we'll do our best to help!

 

Perhaps this post will help you some: