Fixed test imports and some test warnings

openstax · Jan 29, 2024 · d3138fd · d3138fd
1 parent 30af120
commit d3138fd
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 196 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -13,7 +13,4 @@ module.exports = {
     "json",
     "node"
   ],
-  moduleNameMapper: {
-    "(.*)@openstax/ts-utils(.*)": "$1@openstax/ts-utils/$2.js"
-  },
 };
diff --git a/src/components/DropdownMenu.spec.tsx b/src/components/DropdownMenu.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { DropdownMenu, DropdownMenuContext, DropdownMenuItemButton } from './DropdownMenu';
@@ -17,70 +17,75 @@ describe('DropdownMenu', () => {
     </DropdownMenu>
   );
 
-  it('should open on a button click and close on another button click', () => {
-    const component = renderer.create(<TestMenu variant='light'/>);
-    expect(component.toJSON()).toMatchSnapshot();
+  // Need to isolate tests from the 2 libraries in these blocks otherwise we get warnings about using the wrong act()
+  describe('@testing-library/react', () => {
+    it('should open on a button click and close on an outside click', () => {
+      const { asFragment, getByText } = render(<TestMenu variant='primary'/>);
+      expect(asFragment()).toMatchSnapshot();
 
-    component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick();
-    expect(component.toJSON()).toMatchSnapshot();
-    component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick();
-    expect(component.toJSON()).toMatchSnapshot();
-  });
+      const menuButton = getByText('Test Menu');
+      act(() => menuButton.click());
+      expect(asFragment()).toMatchSnapshot();
+      act(() => getByText('Test Menu Item 1').parentElement?.click());
+      expect(asFragment()).toMatchSnapshot();
+      act(() => menuButton.parentElement?.parentElement?.click());
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-  it('should open on a button click and close on an item click', () => {
-    const component = renderer.create(<TestMenu variant='light'/>);
-    expect(component.toJSON()).toMatchSnapshot();
+    it('should handle keyboard events', () => {
+      const { asFragment, getByText } = render(<TestMenu variant='secondary' width='10rem'/>);
+      const menuButton = getByText('Test Menu');
+      expect(asFragment()).toMatchSnapshot();
 
-    component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick();
-    expect(component.toJSON()).toMatchSnapshot();
-    component.root.findAllByProps({ role: 'menuitem' })[0].props.onClick();
-    expect(component.toJSON()).toMatchSnapshot();
-  });
+      fireEvent.keyDown(menuButton, { key: 'ArrowUp' });
+      expect(asFragment()).toMatchSnapshot();
 
-  it('should open on a button click and close on an outside click', () => {
-    const { asFragment, getByText } = render(<TestMenu variant='primary'/>);
-    expect(asFragment()).toMatchSnapshot();
-
-    const menuButton = getByText('Test Menu');
-    menuButton.click();
-    expect(asFragment()).toMatchSnapshot();
-    getByText('Test Menu Item 1').parentElement?.click();
-    expect(asFragment()).toMatchSnapshot();
-    menuButton.parentElement?.parentElement?.click();
-    expect(asFragment()).toMatchSnapshot();
-  });
+      const menuItem1 = getByText('Test Menu Item 1');
+      const menuItem2 = getByText('Test Menu Item 2');
+      fireEvent.keyDown(menuItem2, { key: 'ArrowDown' });
+      fireEvent.keyDown(menuItem1, { key: 'ArrowUp' });
+      fireEvent.keyDown(menuItem2, { key: 'Home' });
+      fireEvent.keyDown(menuItem1, { key: 'End' });
+      fireEvent.keyDown(menuItem2, { key: 'ArrowUp' });
+      fireEvent.keyDown(menuItem1, { key: 'ArrowDown' });
+      fireEvent.keyDown(menuItem2, { key: 't' });
+      fireEvent.keyDown(menuItem1, { key: 'T' });
+      fireEvent.keyDown(menuItem2, { key: 'Escape' });
+      expect(asFragment()).toMatchSnapshot();
 
-  it('should handle keyboard events', () => {
-    const { asFragment, getByText } = render(<TestMenu variant='secondary' width='10rem'/>);
-    const menuButton = getByText('Test Menu');
-    expect(asFragment()).toMatchSnapshot();
-
-    fireEvent.keyDown(menuButton, { key: 'ArrowUp' });
-    expect(asFragment()).toMatchSnapshot();
-
-    const menuItem1 = getByText('Test Menu Item 1');
-    const menuItem2 = getByText('Test Menu Item 2');
-    fireEvent.keyDown(menuItem2, { key: 'ArrowDown' });
-    fireEvent.keyDown(menuItem1, { key: 'ArrowUp' });
-    fireEvent.keyDown(menuItem2, { key: 'Home' });
-    fireEvent.keyDown(menuItem1, { key: 'End' });
-    fireEvent.keyDown(menuItem2, { key: 'ArrowUp' });
-    fireEvent.keyDown(menuItem1, { key: 'ArrowDown' });
-    fireEvent.keyDown(menuItem2, { key: 't' });
-    fireEvent.keyDown(menuItem1, { key: 'T' });
-    fireEvent.keyDown(menuItem2, { key: 'Escape' });
-    expect(asFragment()).toMatchSnapshot();
-
-    fireEvent.keyDown(menuButton, { key: 'ArrowDown' });
-    expect(asFragment()).toMatchSnapshot();
+      fireEvent.keyDown(menuButton, { key: 'ArrowDown' });
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 
-  it('should not open when disabled', () => {
-    const component = renderer.create(<TestMenu disabled={true} variant='light'/>);
-    expect(component.toJSON()).toMatchSnapshot();
+  describe('react-test-renderer', () => {
+    it('should open on a button click and close on another button click', () => {
+      const component = renderer.create(<TestMenu variant='light'/>);
+      expect(component.toJSON()).toMatchSnapshot();
+
+      renderer.act(() => component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick());
+      expect(component.toJSON()).toMatchSnapshot();
+      renderer.act(() => component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick());
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('should open on a button click and close on an item click', () => {
+      const component = renderer.create(<TestMenu variant='light'/>);
+      expect(component.toJSON()).toMatchSnapshot();
 
-    component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick();
-    expect(component.toJSON()).toMatchSnapshot();
+      renderer.act(() => component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick());
+      expect(component.toJSON()).toMatchSnapshot();
+      renderer.act(() => component.root.findAllByProps({ role: 'menuitem' })[0].props.onClick());
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('should not open when disabled', () => {
+      const component = renderer.create(<TestMenu disabled={true} variant='light'/>);
+      expect(component.toJSON()).toMatchSnapshot();
+
+      renderer.act(() => component.root.findByProps({ 'aria-controls': 'test-menu' }).props.onClick());
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 });
 
@@ -93,9 +98,11 @@ describe('DropdownMenuContext', () => {
       <div data-testid='open' onClick={() => openMenu('first')}/>
       <div data-testid='close' onClick={closeMenu}/>
     </>;
-  }
+  };
+
   it('throws errors if used without a context provider', () => {
     const component = renderer.create(<ContextTester/>);
+
     expect(() => component.root.findByProps({ 'data-testid': 'toggle' }).props.onClick()).toThrowError(
       'Tried to call toggleMenu() without a DropdownMenuContext'
     );

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
@@ -198,7 +198,7 @@ export const DropdownMenu = ({
   React.useEffect(() => {
     // Close the menu when clicking outside
     const closeOnOutsideClick = (event: MouseEvent) => {
-      if (!ref.current?.contains(event.target as Node)) {
+      if (!(ref.current && ref.current?.contains(event.target as Node))) {
         state.closeMenu();
       }
     };

diff --git a/src/components/ErrorBoundary.spec.tsx b/src/components/ErrorBoundary.spec.tsx
@@ -3,7 +3,7 @@ import { ErrorBoundary } from './ErrorBoundary';
 import sentryTestkit from 'sentry-testkit';
 import * as Sentry from '@sentry/react';
 import { findByTestId } from '../test/utils';
-import { SessionExpiredError } from '@openstax/ts-utils/errors';
+import { SessionExpiredError } from '@openstax/ts-utils/errors.js';
 
 const { testkit, sentryTransport } = sentryTestkit();
 

diff --git a/src/components/ErrorBoundary.stories.tsx b/src/components/ErrorBoundary.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { ErrorMessage } from "./ErrorMessage";
-import { UnauthorizedError, SessionExpiredError } from "@openstax/ts-utils/errors";
+import { UnauthorizedError, SessionExpiredError } from "@openstax/ts-utils/errors.js";
 import { useSetAppError } from "../../src/hooks";
 
 const ErrorComponent = ({ doThrow, setShowError, error: error, errorMessage }: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,4 @@ module.exports = { @@
         "json",
         "node"
       ],
-      moduleNameMapper: {
-        "(.*)@openstax/ts-utils(.*)": "$1@openstax/ts-utils/$2.js"
-      },
     };