add ResizeObserver API precense checks

Author: just-boris

jest/unit-setup.js

@@ -4,6 +4,3 @@
 require('@testing-library/jest-dom');
 const { cleanup } = require('@testing-library/react');
 afterEach(cleanup);
-
-// Import ResizeObserver and getBoundingClientRect mocks
-require('./resize-observer-mock');

src/container-queries/__tests__/use-container-query-pure.test.tsx

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ContainerQueryEntry } from '../interfaces';
+import useContainerQuery from '../use-container-query';
+
+function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEntry) => string }) {
+  const [value, ref] = useContainerQuery(mapFn);
+  return <div ref={ref} data-testid="test" data-value={value} />;
+}
+
+test('should work in JSDOM environment without any mocks', () => {
+  // making sure this API does not exist
+  expect(typeof ResizeObserver).toBe('undefined');
+  const mapFn = jest.fn(() => '');
+  const component = render(<TestComponent mapFn={mapFn} />);
+  expect(mapFn).toHaveBeenCalledWith(
+    {
+      target: component.getByTestId('test'),
+      contentBoxWidth: 0,
+      contentBoxHeight: 0,
+      borderBoxWidth: 0,
+      borderBoxHeight: 0,
+    },
+    null
+  );
+});

src/container-queries/__tests__/use-container-query.test.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import useContainerQuery from '../use-container-query';
 import { ContainerQueryEntry } from '../interfaces';
+import '../../internal/container-queries/__tests__/resize-observer-mock';
 
 function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEntry) => string }) {
   const [value, ref] = useContainerQuery(mapFn);

jest/resize-observer-mock.js …ueries/__tests__/resize-observer-mock.tsjest/resize-observer-mock.js renamed to src/internal/container-queries/__tests__/resize-observer-mock.ts jest/resize-observer-mock.js renamed to src/internal/container-queries/__tests__/resize-observer-mock.ts

@@ -5,6 +5,7 @@ import React, { useState, useRef } from 'react';
 import { render } from '@testing-library/react';
 import { useResizeObserver } from '../use-resize-observer';
 import { ContainerQueryEntry } from '../interfaces';
+import './resize-observer-mock';
 
 function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEntry) => string }) {
   const ref = useRef<HTMLDivElement>(null);

src/internal/container-queries/__tests__/use-resize-observer.test.tsx

@@ -52,7 +52,7 @@ export function useResizeObserver(elementRef: ElementReference, onObserve: (entr
 
   useEffect(() => {
     const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;
-    if (element) {
+    if (element && typeof ResizeObserver !== 'undefined') {
       let connected = true;
       const observer = new ResizeObserver(entries => {
         // Prevent observe notifications on already unmounted component.