@openmrs/esm-react-utils 5.8.2-pre.2533 → 6.0.0

package/.turbo/turbo-build.log

@@ -11,4 +11,4 @@ built modules 295 KiB [built]
     ./src/index.ts + 138 modules 284 KiB [built] [code generated]
     ../esm-state/dist/openmrs-esm-state.js 8.12 KiB [built] [code generated]
   + 5 modules
-webpack 5.88.0 compiled successfully in 7842 ms
+webpack 5.88.0 compiled successfully in 8039 ms

package/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  clearMocks: true,
   transform: {
     '^.+\\.(j|t)sx?$': ['@swc/jest'],
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.8.2-pre.2533",
+  "version": "6.0.0",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -61,15 +61,15 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "5.8.2-pre.2533",
-    "@openmrs/esm-config": "5.8.2-pre.2533",
-    "@openmrs/esm-context": "5.8.2-pre.2533",
-    "@openmrs/esm-error-handling": "5.8.2-pre.2533",
-    "@openmrs/esm-extensions": "5.8.2-pre.2533",
-    "@openmrs/esm-feature-flags": "5.8.2-pre.2533",
-    "@openmrs/esm-globals": "5.8.2-pre.2533",
-    "@openmrs/esm-navigation": "5.8.2-pre.2533",
-    "@openmrs/esm-utils": "5.8.2-pre.2533",
+    "@openmrs/esm-api": "6.0.0",
+    "@openmrs/esm-config": "6.0.0",
+    "@openmrs/esm-context": "6.0.0",
+    "@openmrs/esm-error-handling": "6.0.0",
+    "@openmrs/esm-extensions": "6.0.0",
+    "@openmrs/esm-feature-flags": "6.0.0",
+    "@openmrs/esm-globals": "6.0.0",
+    "@openmrs/esm-navigation": "6.0.0",
+    "@openmrs/esm-utils": "6.0.0",
     "dayjs": "^1.10.8",
     "i18next": "^21.10.0",
     "react": "^18.1.0",
@@ -78,6 +78,5 @@
     "rxjs": "^6.5.3",
     "swr": "^2.2.5",
     "webpack": "^5.88.0"
-  },
-  "stableVersion": "5.8.1"
+  }
 }

package/src/ConfigurableLink.test.tsx

@@ -7,7 +7,7 @@ import { ConfigurableLink } from './ConfigurableLink';
 
 jest.mock('single-spa');
 
-const mockNavigate = navigate as jest.Mock;
+const mockNavigate = jest.mocked(navigate);
 
 describe(`ConfigurableLink`, () => {
   const path = '${openmrsSpaBase}/home';
@@ -15,19 +15,21 @@ describe(`ConfigurableLink`, () => {
     mockNavigate.mockClear();
   });
 
-  it(`interpolates the link`, async () => {
+  it('interpolates the link', async () => {
     render(
       <ConfigurableLink to={path} className="fancy-link">
         SPA Home
       </ConfigurableLink>,
     );
     const link = screen.getByRole('link', { name: /spa home/i });
-    expect(link).toBeTruthy();
+    expect(link).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/no-node-access
     expect(link.closest('a')).toHaveClass('fancy-link');
+    // eslint-disable-next-line testing-library/no-node-access
     expect(link.closest('a')).toHaveAttribute('href', '/openmrs/spa/home');
   });
 
-  it(`calls navigate on normal click but not special clicks`, async () => {
+  it('calls navigate on normal click but not special clicks', async () => {
     render(
       <ConfigurableLink to={path} className="fancy-link">
         SPA Home
@@ -42,7 +44,7 @@ describe(`ConfigurableLink`, () => {
     expect(navigate).toHaveBeenCalledWith({ to: path });
   });
 
-  it(`calls navigate on enter`, async () => {
+  it('calls navigate on enter', async () => {
     render(
       <ConfigurableLink to={path} className="fancy-link">
         SPA Home

package/src/extensions.test.tsx

@@ -1,9 +1,11 @@
-import React, { useCallback, useReducer } from 'react';
+/* eslint-disable */
+import React, { useReducer } from 'react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import { act, render, screen, waitFor, within } from '@testing-library/react';
+import { registerFeatureFlag, setFeatureFlag } from '@openmrs/esm-feature-flags';
 import {
   attach,
-  type ConnectedExtension,
   getExtensionNameFromId,
   registerExtension,
   updateInternalExtensionStore,
@@ -14,32 +16,29 @@ import {
   ExtensionSlot,
   openmrsComponentDecorator,
   useExtensionSlotMeta,
-  type ExtensionData,
   useRenderableExtensions,
 } from '.';
-import userEvent from '@testing-library/user-event';
-import { registerFeatureFlag, setFeatureFlag } from '@openmrs/esm-feature-flags';
 
 // For some reason in the test context `isEqual` always returns true
 // when using the import substitution in jest.config.js. Here's a custom
 // mock.
-jest.mock('lodash-es/isEqual', () => (a, b) => JSON.stringify(a) == JSON.stringify(b));
+jest.mock('lodash-es/isEqual', () => (a, b) => JSON.stringify(a) === JSON.stringify(b));
 
 describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
   beforeEach(() => {
     updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('Extension receives state changes passed through (not using <Extension>)', async () => {
+    const user = userEvent.setup();
+
     function EnglishExtension({ suffix }) {
       return <div>English{suffix}</div>;
     }
+
     registerSimpleExtension('English', 'esm-languages-app', EnglishExtension);
     attach('Box', 'English');
+
     const App = openmrsComponentDecorator({
       moduleName: 'esm-languages-app',
       featureName: 'Languages',
@@ -53,20 +52,25 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
         </div>
       );
     });
+
     render(<App />);
 
-    await waitFor(() => expect(screen.getByText(/English/)).toBeInTheDocument());
+    expect(await screen.findByText(/English/)).toBeInTheDocument();
     expect(screen.getByText(/English/)).toHaveTextContent('English!');
-    userEvent.click(screen.getByText('Toggle suffix'));
-    await waitFor(() => expect(screen.getByText(/English/)).toHaveTextContent('English?'));
+    await user.click(screen.getByText('Toggle suffix'));
+    expect(screen.getByText(/English/)).toHaveTextContent('English?');
   });
 
   test('Extension receives state changes (using <Extension>)', async () => {
+    const user = userEvent.setup();
+
     function HaitianCreoleExtension({ suffix }) {
       return <div>Haitian Creole{suffix}</div>;
     }
+
     registerSimpleExtension('Haitian', 'esm-languages-app', HaitianCreoleExtension);
     attach('Box', 'Haitian');
+
     const App = openmrsComponentDecorator({
       moduleName: 'esm-languages-app',
       featureName: 'Languages',
@@ -84,21 +88,24 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
         </div>
       );
     });
+
     render(<App />);
 
-    await waitFor(() => expect(screen.getByText(/Haitian/)).toBeInTheDocument());
+    expect(await screen.findByText(/Haitian/)).toBeInTheDocument();
     expect(screen.getByText(/Haitian/)).toHaveTextContent('Haitian Creole!');
-    userEvent.click(screen.getByText('Toggle suffix'));
-    await waitFor(() => expect(screen.getByText(/Haitian/)).toHaveTextContent('Haitian Creole?'));
+    await user.click(screen.getByText('Toggle suffix'));
+    expect(screen.getByText(/Haitian/)).toHaveTextContent('Haitian Creole?');
   });
 
   test('ExtensionSlot throws error if both state and children provided', () => {
     const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
     const App = () => (
       <ExtensionSlot name="Box" state={{ color: 'red' }}>
         <Extension />
       </ExtensionSlot>
     );
+
     expect(() => render(<App />)).toThrow();
     expect(consoleError).toHaveBeenNthCalledWith(
       1,
@@ -116,6 +123,7 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
       code: 'es',
     });
     attach('Box', 'Spanish');
+
     const App = openmrsComponentDecorator({
       moduleName: 'esm-languages-app',
       featureName: 'Languages',
@@ -135,21 +143,26 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
         </div>
       );
     });
+
     render(<App />);
 
-    await waitFor(() => expect(screen.getByRole('heading')).toBeInTheDocument());
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
     expect(screen.getByRole('heading')).toHaveTextContent('es');
-    await waitFor(() => expect(screen.getByText('Spanish')).toBeInTheDocument());
+    expect(screen.getByText('Spanish')).toBeInTheDocument();
   });
 
   test('Both meta and state can be used at the same time', async () => {
+    const user = userEvent.setup();
     function SwahiliExtension({ suffix }) {
       return <div>Swahili{suffix}</div>;
     }
+
     registerSimpleExtension('Swahili', 'esm-languages-app', SwahiliExtension, {
       code: 'sw',
     });
+
     attach('Box', 'Swahili');
+
     const App = openmrsComponentDecorator({
       moduleName: 'esm-languages-app',
       featureName: 'Languages',
@@ -171,12 +184,13 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
         </div>
       );
     });
+
     render(<App />);
 
-    await waitFor(() => expect(screen.getByRole('heading')).toBeInTheDocument());
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
     expect(screen.getByRole('heading')).toHaveTextContent('sw');
     await waitFor(() => expect(screen.getByText(/Swahili/)).toHaveTextContent('Swahili!'));
-    userEvent.click(screen.getByText('Toggle suffix'));
+    await user.click(screen.getByText('Toggle suffix'));
     await waitFor(() => expect(screen.getByText(/Swahili/)).toHaveTextContent('Swahili?'));
   });
 
@@ -187,8 +201,10 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     registerSimpleExtension('Hindi', 'esm-languages-app', undefined, {
       code: 'hi',
     });
+
     attach('Box', 'Urdu');
     attach('Box', 'Hindi');
+
     const App = openmrsComponentDecorator({
       moduleName: 'esm-languages-app',
       featureName: 'Languages',
@@ -207,9 +223,10 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
         </div>
       );
     });
+
     render(<App />);
 
-    await waitFor(() => expect(screen.getByTestId('Urdu')).toBeInTheDocument());
+    expect(await screen.findByTestId('Urdu')).toBeInTheDocument();
     expect(within(screen.getByTestId('Urdu')).getByRole('heading')).toHaveTextContent('urd');
     expect(within(screen.getByTestId('Hindi')).getByRole('heading')).toHaveTextContent('hi');
   });
@@ -219,18 +236,22 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     registerSimpleExtension('Turkish', 'esm-languages-app', undefined, undefined, 'turkic');
     registerSimpleExtension('Turkmeni', 'esm-languages-app', undefined, undefined, 'turkic');
     registerSimpleExtension('Kurmanji', 'esm-languages-app', undefined, undefined, 'kurdish');
+
     attach('Box', 'Arabic');
     attach('Box', 'Turkish');
     attach('Box', 'Turkmeni');
     attach('Box', 'Kurmanji');
+
     registerFeatureFlag('turkic', '', '');
     registerFeatureFlag('kurdish', '', '');
     setFeatureFlag('turkic', true);
+
     const App = openmrsComponentDecorator({
       moduleName: 'esm-languages-app',
       featureName: 'Languages',
       disableTranslations: true,
     })(() => <ExtensionSlot name="Box" />);
+
     render(<App />);
 
     await waitFor(() => expect(screen.getByText(/Turkmeni/)).toBeInTheDocument());
@@ -255,13 +276,13 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
       featureName: 'Languages',
       disableTranslations: true,
     })(() => {
-      const extensions = useRenderableExtensions('Box');
-      const Ext = extensions[0];
+      const utils = useRenderableExtensions('Box');
+      const Ext = utils[0];
       return <Ext state={{ suffix: ' hola' }} />;
     });
     render(<App />);
 
-    await waitFor(() => expect(screen.getByText('Spanish hola')).toBeInTheDocument());
+    expect(await screen.findByText('Spanish hola')).toBeInTheDocument();
   });
 });
 

package/src/openmrsComponentDecorator.test.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { render, screen, waitFor} from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { openmrsComponentDecorator } from './openmrsComponentDecorator';
 import { ComponentContext } from './ComponentContext';
 
@@ -10,11 +10,11 @@ describe('openmrs-component-decorator', () => {
     moduleName: 'test',
   };
 
-  it('renders a component', () => {
+  it('renders a component', async () => {
     const DecoratedComp = openmrsComponentDecorator(opts)(CompThatWorks);
     render(<DecoratedComp />);
 
-    screen.findByText('The button');
+    expect(await screen.findByText('The button')).toBeInTheDocument();
   });
 
   it('catches any errors in the component tree and renders a ui explaining something bad happened', () => {
@@ -36,21 +36,21 @@ describe('openmrs-component-decorator', () => {
     render(<DecoratedComp />);
   });
 
-  it("rendering a unsafe component in strict mode should log error in console",()=>{
+  it('rendering a unsafe component in strict mode should log error in console', () => {
     const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
-      const UnsafeDecoratedCompnent = openmrsComponentDecorator(opts)(UnsafeComponent);
-      render(<UnsafeDecoratedCompnent/>);
-      expect(consoleError.mock.calls[0][0]).toContain('Warning: Using UNSAFE_componentWillMount');
-      consoleError.mockRestore();
-  })
+    const UnsafeDecoratedCompnent = openmrsComponentDecorator(opts)(UnsafeComponent);
+    render(<UnsafeDecoratedCompnent />);
+    expect(consoleError.mock.calls[0][0]).toContain('Warning: Using UNSAFE_componentWillMount');
+    consoleError.mockRestore();
+  });
 
-  it("rendering an unsafe component without strict mode should not log an error in console",()=>{
-      const spy = jest.spyOn(console, "error");
-      const unsafeComponentOptions=Object.assign(opts,{strictMode:false})
-      const UnsafeDecoratedCompnent = openmrsComponentDecorator(unsafeComponentOptions)(UnsafeComponent);
-      render(<UnsafeDecoratedCompnent/>);
-      expect(spy).not.toHaveBeenCalled();
-  })
+  it('rendering an unsafe component without strict mode should not log an error in console', () => {
+    const spy = jest.spyOn(console, 'error');
+    const unsafeComponentOptions = Object.assign(opts, { strictMode: false });
+    const UnsafeDecoratedCompnent = openmrsComponentDecorator(unsafeComponentOptions)(UnsafeComponent);
+    render(<UnsafeDecoratedCompnent />);
+    expect(spy).not.toHaveBeenCalled();
+  });
 });
 
 function CompThatWorks() {
@@ -66,13 +66,10 @@ function CompWithConfig() {
   return <div>{moduleName}</div>;
 }
 
+class UnsafeComponent extends Component<any, any> {
+  UNSAFE_componentWillMount() {}
 
-class UnsafeComponent extends Component<any,any> {
-  
-  UNSAFE_componentWillMount() { 
-   } 
-
- render() { 
-   return <h1>This is Unsafe Component</h1>; 
- } 
+  render() {
+    return <h1>This is Unsafe Component</h1>;
+  }
 }

package/src/useAbortController.test.tsx

@@ -1,10 +1,8 @@
-import { renderHook, cleanup } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import useAbortController from './useAbortController';
 
 describe('useAbortController', () => {
-  afterEach(cleanup);
-
   it('returns an AbortController', () => {
     const { result } = renderHook(() => useAbortController());
     expect(result.current).not.toBeNull();

package/src/useConfig.test.tsx

@@ -1,13 +1,15 @@
+/* eslint-disable -- Test file uses React Testing Library patterns that conflict
+   with current ESLint rules. TODO: Investigate updating test patterns or ESLint config */
 import React from 'react';
-import { render, cleanup, screen, waitFor, act } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import {
+  configInternalStore,
   defineConfigSchema,
-  temporaryConfigStore,
   provide,
-  configInternalStore,
+  temporaryConfigStore,
   type ConfigInternalStore,
 } from '@openmrs/esm-config';
-import type { MockedStore } from '../__mocks__/openmrs-esm-state.mock';
+import { type MockedStore } from '@openmrs/esm-state/mock';
 import { useConfig } from './useConfig';
 import { ComponentContext } from './ComponentContext';
 
@@ -32,7 +34,7 @@ function clearConfig() {
 describe(`useConfig in root context`, () => {
   afterEach(clearConfig);
 
-  it(`can return config as a react hook`, async () => {
+  it('can return config as a react hook', async () => {
     defineConfigSchema('foo-module', {
       thing: {
         _default: 'The first thing',
@@ -41,7 +43,7 @@ describe(`useConfig in root context`, () => {
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: 'foo-module' }}>
+        <ComponentContext.Provider value={{ moduleName: 'foo-module', featureName: 'foo-feature' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
       </React.Suspense>,
@@ -50,7 +52,7 @@ describe(`useConfig in root context`, () => {
     await waitFor(() => expect(screen.findByText('The first thing')).toBeTruthy());
   });
 
-  it(`can handle multiple calls to useConfig from different modules`, async () => {
+  it('can handle multiple calls to useConfig from different modules', async () => {
     defineConfigSchema('foo-module', {
       thing: {
         _default: 'foo thing',
@@ -65,7 +67,7 @@ describe(`useConfig in root context`, () => {
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: 'foo-module' }}>
+        <ComponentContext.Provider value={{ moduleName: 'foo-module', featureName: 'foo-feature' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
       </React.Suspense>,
@@ -73,11 +75,9 @@ describe(`useConfig in root context`, () => {
 
     await waitFor(() => expect(screen.findByText('foo thing')).toBeTruthy());
 
-    await cleanup();
-
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: 'bar-module' }}>
+        <ComponentContext.Provider value={{ moduleName: 'bar-module', featureName: 'bar-feature' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
       </React.Suspense>,
@@ -95,7 +95,7 @@ describe(`useConfig in root context`, () => {
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: 'foo-module' }}>
+        <ComponentContext.Provider value={{ moduleName: 'foo-module', featureName: 'foo-feature' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
       </React.Suspense>,
@@ -109,15 +109,14 @@ describe(`useConfig in root context`, () => {
       }),
     );
 
-    await waitFor(() => expect(screen.findByText('A new thing')).toBeTruthy());
+    await screen.findByText('A new thing');
   });
 });
 
 describe(`useConfig in an extension`, () => {
   afterEach(clearConfig);
-  afterEach(cleanup);
 
-  it(`can return extension config as a react hook`, async () => {
+  it('can return extension config as a react hook', async () => {
     defineConfigSchema('ext-module', {
       thing: {
         _default: 'The basics',
@@ -129,6 +128,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'ext-module',
+            featureName: 'ext-feature',
             extension: {
               extensionSlotName: 'fooSlot',
               extensionSlotModuleName: 'slot-mod',
@@ -144,7 +144,7 @@ describe(`useConfig in an extension`, () => {
     await waitFor(() => expect(screen.findByText('The basics')).toBeTruthy());
   });
 
-  it(`can handle multiple extensions`, async () => {
+  it('can handle multiple extensions', async () => {
     defineConfigSchema('first-module', {
       thing: {
         _default: 'first thing',
@@ -162,6 +162,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'first-module',
+            featureName: 'first-feature',
             extension: {
               extensionSlotName: 'fooSlot',
               extensionSlotModuleName: 'slot-mod',
@@ -174,6 +175,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'second-module',
+            featureName: 'second-feature',
             extension: {
               extensionSlotName: 'fooSlot',
               extensionSlotModuleName: 'slot-mod',
@@ -214,6 +216,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'extension-module',
+            featureName: 'extension-feature',
             extension: {
               extensionSlotName: 'slot1',
               extensionSlotModuleName: 'slot-1-module',
@@ -226,6 +229,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'extension-module',
+            featureName: 'extension-feature',
             extension: {
               extensionSlotName: 'slot2',
               extensionSlotModuleName: 'slot-2-module',
@@ -254,6 +258,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'ext-module',
+            featureName: 'ext-feature',
             extension: {
               extensionSlotName: 'fooSlot',
               extensionSlotModuleName: 'slot-module',
@@ -309,6 +314,7 @@ describe(`useConfig in an extension`, () => {
         <ComponentContext.Provider
           value={{
             moduleName: 'first-module',
+            featureName: 'first-feature',
             extension: {
               extensionSlotName: 'fooSlot',
               extensionSlotModuleName: 'slot-mod',

package/src/useOnClickOutside.test.tsx

@@ -5,7 +5,6 @@ import { useOnClickOutside } from './useOnClickOutside';
 
 describe('useOnClickOutside', () => {
   const handler: (e: Event) => void = jest.fn();
-  afterEach(() => (handler as jest.Mock).mockClear());
 
   it('should call the handler when clicking outside', async () => {
     const user = userEvent.setup();
@@ -14,10 +13,10 @@ describe('useOnClickOutside', () => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
       return <div ref={ref}>{children}</div>;
     };
-    const ref = render(<Component />);
+    const view = render(<Component />);
 
     // act
-    await user.click(ref.container);
+    await user.click(view.container);
 
     // verify
     expect(handler).toHaveBeenCalledTimes(1);
@@ -52,11 +51,11 @@ describe('useOnClickOutside', () => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
       return <div ref={ref}>{children}</div>;
     };
-    const ref = render(<Component />);
+    const view = render(<Component />);
     const spy = jest.spyOn(window, 'removeEventListener');
 
     // act
-    ref.unmount();
+    view.unmount();
 
     // verify
     expect(spy).toHaveBeenCalledWith('mousedown', expect.any(Function));

package/src/useOpenmrsFetchAll.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, cleanup, waitFor, act } from '@testing-library/react';
+import { renderHook, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useOpenmrsFetchAll } from './useOpenmrsFetchAll';
 import { type OpenMRSPaginatedResponse } from './useOpenmrsPagination';
@@ -27,8 +27,6 @@ export async function getTestData(url: string, totalCount: number): Promise<Open
 }
 
 describe('useOpenmrsFetchAll', () => {
-  afterEach(cleanup);
-
   it('should render all rows on if number of rows < pageSize', async () => {
     const expectedRowCount = 17;
     const { result } = renderHook(() =>

package/src/useOpenmrsInfinite.test.tsx

@@ -1,11 +1,9 @@
 import '@testing-library/jest-dom';
-import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { useOpenmrsInfinite } from './useOpenmrsInfinite';
 import { getIntArray, getTestData } from './useOpenmrsPagination.test';
 
 describe('useOpenmrsInfinite', () => {
-  afterEach(cleanup);
-
   it('should load all rows with 1 fetch if number of rows < pageSize', async () => {
     const pageSize = 20;
     const expectedRowCount = 17;

package/src/useOpenmrsPagination.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, cleanup, waitFor, act } from '@testing-library/react';
+import { renderHook, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useOpenmrsPagination, type OpenMRSPaginatedResponse } from './useOpenmrsPagination';
 
@@ -26,8 +26,6 @@ export async function getTestData(url: string, totalCount: number): Promise<Open
 }
 
 describe('useOpenmrsPagination', () => {
-  afterEach(cleanup);
-
   it('should not fetch anything if url is null', async () => {
     const { result } = renderHook(() =>
       useOpenmrsPagination(null as any, 50, {