fix: tests

Author: jscottsmith

jest-setup.ts

@@ -1,10 +1,8 @@
+// Import jest-dom to extend expect matchers
 import '@testing-library/jest-dom';
 
-// Declare global for TypeScript
-declare const global: any;
-
 // Mock ResizeObserver for tests
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
+(global as any).ResizeObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
   unobserve: jest.fn(),
   disconnect: jest.fn(),

package.json

@@ -125,6 +125,7 @@
     "@storybook/react": "^6.4.20",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",

pnpm-lock.yaml

@@ -108,7 +108,7 @@ describe('given the <Parallax> component', () => {
         wrapper: Wrapper,
       });
       expect(asFragment()).toMatchSnapshot();
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props,
       });
@@ -126,7 +126,7 @@ describe('given the <Parallax> component', () => {
           <Parallax translateY={[-100, 100]} />
         </MockProvider>
       );
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props: { translateY: [-100, 100] },
       });
@@ -147,7 +147,7 @@ describe('given the <Parallax> component', () => {
       );
       const element = controller.getElements()[0];
       unmount();
-      expect(controller.removeElementById).toBeCalledWith(element.id);
+      expect(controller.removeElementById).toHaveBeenCalledWith(element.id);
     });
 
     it('then it updates an element in the controller when receiving relevant new props', () => {
@@ -178,11 +178,14 @@ describe('given the <Parallax> component', () => {
 
       const element = controller.getElements()[0];
 
-      expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-        disabled: false,
-        translateX: [100, -100],
-        translateY: [-100, 100],
-      });
+      expect(controller.updateElementPropsById).toHaveBeenCalledWith(
+        element.id,
+        {
+          disabled: false,
+          translateX: [100, -100],
+          translateY: [-100, 100],
+        }
+      );
 
       const newProps = {
         disabled: false,
@@ -198,11 +201,14 @@ describe('given the <Parallax> component', () => {
         />
       );
 
-      expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-        disabled: false,
-        translateX: [-40, -60],
-        translateY: [10, 80],
-      });
+      expect(controller.updateElementPropsById).toHaveBeenCalledWith(
+        element.id,
+        {
+          disabled: false,
+          translateX: [-40, -60],
+          translateY: [10, 80],
+        }
+      );
 
       // only update with valid props
       rerender(
@@ -254,12 +260,15 @@ describe('given the <Parallax> component', () => {
 
       const element = controller.getElements()[0];
 
-      expect(controller.resetElementStyles).toBeCalledWith(element);
-      expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-        disabled: true,
-        translateX: [100, -100],
-        translateY: [-100, 100],
-      });
+      expect(controller.resetElementStyles).toHaveBeenCalledWith(element);
+      expect(controller.updateElementPropsById).toHaveBeenCalledWith(
+        element.id,
+        {
+          disabled: true,
+          translateX: [100, -100],
+          translateY: [-100, 100],
+        }
+      );
     });
 
     it('then it resets styles on an element if the disabled prop is true', () => {
@@ -290,7 +299,7 @@ describe('given the <Parallax> component', () => {
         <Parallax disabled={true} translateX={offX} translateY={offY} />
       );
 
-      expect(controller.resetElementStyles).toBeCalled();
+      expect(controller.resetElementStyles).toHaveBeenCalled();
     });
   });
 });

src/components/Parallax/index.test.tsx

@@ -47,7 +47,7 @@ describe('given a <ParallaxBanner> component', () => {
         }
       );
       expect(asFragment()).toMatchSnapshot();
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props: {
           ...props,
@@ -74,7 +74,7 @@ describe('given a <ParallaxBanner> component', () => {
       render(<ParallaxBanner layers={[{ children: <div /> }]} />, {
         wrapper: Wrapper,
       });
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props: {
           shouldDisableScalingTranslations: true,

src/components/ParallaxBanner/index.test.tsx

@@ -29,7 +29,7 @@ describe('A <ParallaxProvider>', () => {
 
     render();
 
-    expect(child).toBeCalled();
+    expect(child).toHaveBeenCalled();
   });
 
   it('to pass the controller context', () => {
@@ -90,7 +90,7 @@ describe('A <ParallaxProvider>', () => {
     expect(
       // @ts-expect-error
       parallaxController.enableParallaxController
-    ).toBeCalled();
+    ).toHaveBeenCalled();
   });
 
   it('to destroy the controller when unmounting', () => {
@@ -112,8 +112,8 @@ describe('A <ParallaxProvider>', () => {
     screen.unmount();
 
     expect(
-      ((parallaxController as unknown) as ParallaxController)?.destroy
-    ).toBeCalled();
+      (parallaxController as unknown as ParallaxController)?.destroy
+    ).toHaveBeenCalled();
   });
 
   it('to update the scroll container when receiving a new container el', () => {
@@ -142,7 +142,7 @@ describe('A <ParallaxProvider>', () => {
 
     screen.unmount();
     // @ts-expect-error
-    expect(parallaxController?.updateScrollContainer).toBeCalledWith(el);
+    expect(parallaxController?.updateScrollContainer).toHaveBeenCalledWith(el);
   });
 
   // NOTE: I think this test can be removed

src/components/ParallaxProvider/index.test.tsx

@@ -11,16 +11,15 @@ const Wrapper = (props: PropsWithChildren<{}>) => (
 );
 
 describe('given useParallaxController hook', () => {
-  const { window } = global;
+  const { window } = global as any;
   afterEach(() => {
-    global.window = window;
+    (global as any).window = window;
   });
   describe.skip('when the window is undefined', () => {
     test('then it should return null', () => {
       try {
         const { result } = renderHook(() => {
-          // @ts-expect-error
-          delete global.window;
+          delete (global as any).window;
           return useParallaxController();
         });
         expect(result.current).toBe(null);

src/hooks/useParallaxController.test.tsx

@@ -1,16 +1,17 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, PropsWithChildren } from 'react';
 import { ParallaxContext } from '../../src/context/ParallaxContext';
 import { ParallaxController } from 'parallax-controller';
 
-export class MockProvider extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    controllerMock: PropTypes.object.isRequired,
-  };
+interface MockProviderProps {
+  controllerMock: ParallaxController;
+}
+
+export class MockProvider extends Component<
+  PropsWithChildren<MockProviderProps>
+> {
   controller: ParallaxController;
 
-  constructor(props: { controllerMock: ParallaxController }) {
+  constructor(props: PropsWithChildren<MockProviderProps>) {
     super(props);
     this.controller = props.controllerMock;
   }

src/testUtils/MockProvider.tsx

@@ -0,0 +1,4 @@
+// Global type declarations
+declare global {
+  const global: any;
+}