Failed to create the resize observer in the ParallaxContoller

[princejoogie]

Expected Behavior

no warnings when running tests with jest

Actual Behavior

bunch of console.warn are printed when running tests

console.warn
    Failed to create the resize observer in the ParallaxContoller

Steps to Reproduce the Problem

1. add ParallaxProvider in _app.tsx then add a Parallax component to one of the elements.

2. create a simple unit test (jest)

     beforeEach(() => {
       render(
         <ParallaxProvider>
           <Home />
         </ParallaxProvider>
       );
     });
   
     it("renders facebook button", () => {
       const fbButton = screen.getByTestId("jumbotron-facebook-button");
       expect(fbButton).toHaveTextContent("Facebook group");
     });

3. run tests with jest

Environment

• Version: 3.0.3
• Platform: Windows
• Browser: Firefox
• Framework: NextJS

[jscottsmith]

It's a warning, so you can just ignore it but if you want to fix it add just a Resize Observer mock to your Jest environment. This API is not available in Jest DOM by default. See this for an example: https://github.com/jscottsmith/parallax-controller/blob/master/src/setupTests.ts

[petertflem]

@jscottsmith I also get the log statement, but when the site is live (saw it on our staging). Is it safe to ignore i production too?

[jscottsmith]

@petertflem hmm, seems strange -- this should only show on browsers that do not support the ResizeObserver API but most modern browser do.

Are you on an old version of Chrome?

Regardless, you can ignore it. The event help update cache when layout shifts, but won't break without it.

[petertflem]

@jscottsmith Hm, I probably was, but my memory is fuzzy. Might have been testing on iOS 13 with Safari or Chrome, we had some other errors there. In fact, I am pretty sure I was. Either Chrome 92, but likely Safari 13, and the ResizeObserver API was introduces in 13.1, it looks like.

Thanks!