STDTC-111: React v19: refactor away from ReactDOM.render (#308)

CHANGELOG.md

@@ -3,7 +3,9 @@
 ## IN PROGRESS
 
 * Add User look-up filter for existing jobs to Logs page. Refs STDTC-97.
-* Refs STDTC-113.
+* React v19: refactor away from default props for functional components. Refs STDTC-113
+* React v19: refactor away from unmountComponentAtNode. Refs STDTC-112
+* React v19: refactor away from ReactDOM.render. Refs STDTC-111
 
 ## [6.1.1](https://github.com/folio-org/stripes-data-transfer-components/tree/v6.1.1) (2024-04-19)
 [Full Changelog](https://github.com/folio-org/stripes-data-transfer-components/compare/v6.1.0...v6.1.1)

lib/ListFormatter/useListFormatter.test.js

@@ -1,9 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { IntlProvider } from 'react-intl';
 
 import '../../test/jest/__mock__';
 
 import { useListFormatter } from './useListFormatter';
+import { useMappingProfileListFormatter } from '../Settings';
 
 const record = {
   id: '1737d899-6fb9-44f4-ba16-9a8b111cd61d',
@@ -17,19 +19,6 @@ const record = {
   metadata: { updatedDate: '2018-12-04T09:05:30.000+0000' },
 };
 
-const getHookExecutionResult = (hook, hookArguments = []) => {
-  const result = {};
-  const TestComponent = () => {
-    Object.assign(result, hook(...hookArguments));
-
-    return null;
-  };
-
-  render(<TestComponent />);
-
-  return result;
-};
-
 describe('useListFormatter', () => {
   const {
     name,
@@ -40,26 +29,33 @@ describe('useListFormatter', () => {
     },
   } = record;
 
+
+  const wrapper = ({ children }) => (
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  );
+
   const customFormatters = { userName: item => item.userInfo.userName };
-  const listFormatter = getHookExecutionResult(useListFormatter, [customFormatters]);
+  const { result } = renderHook(() => useMappingProfileListFormatter(customFormatters), { wrapper });
 
   it('should format name field value correctly', () => {
-    expect(listFormatter.name(record)).toBe(name);
+    expect(result.current.name(record)).toBe(name);
   });
 
   it('should format updatedBy field correctly', () => {
-    expect(listFormatter.updatedBy(record)).toBe(`${firstName} ${lastName}`);
+    expect(result.current.updatedBy(record)).toBe(`${firstName} ${lastName}`);
   });
 
   it('should format empty updatedBy field correctly', () => {
-    expect(listFormatter.updatedBy({})).toBe('');
+    expect(result.current.updatedBy({})).toBe('');
   });
 
   it('should format completed date field value correctly', () => {
-    expect(listFormatter.updated(record)).toBe('2018-12-04');
+    expect(result.current.updated(record)).toBe('2018-12-04');
   });
 
   it('should add custom orders to formatter - userName', () => {
-    expect(listFormatter.userName(record)).toBe(userName);
+    expect(result.current.userName(record)).toBe(userName);
   });
 });

lib/Settings/MappingProfiles/useMappingProfileListFormatter.test.js

@@ -1,6 +1,7 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { IntlProvider } from 'react-intl';
 import { mappingProfilesData } from './tests/mappingProfilesData';
 import { useMappingProfileListFormatter } from './useMappingProfileListFormatter';
-import { getHookExecutionResult } from '../../../test/helpers/getHookExecutionResult';
 
 describe('MappingProfiles > useMappingProfileListFormatter', () => {
   const mappingProfile = mappingProfilesData[0];
@@ -12,28 +13,34 @@ describe('MappingProfiles > useMappingProfileListFormatter', () => {
     },
   } = mappingProfile;
 
+  const wrapper = ({ children }) => (
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  );
+
   describe('executing without custom props', () => {
-    const listFormatter = getHookExecutionResult(useMappingProfileListFormatter);
+    const { result } = renderHook(() => useMappingProfileListFormatter(), { wrapper });
 
     it('should format name field value correctly', () => {
-      expect(listFormatter.name(mappingProfile)).toEqual(name);
+      expect(result.current.name(mappingProfile)).toEqual(name);
     });
 
     it('should format updatedBy field correctly', () => {
-      expect(listFormatter.updatedBy(mappingProfile)).toBe(`${firstName} ${lastName}`);
+      expect(result.current.updatedBy(mappingProfile)).toBe(`${firstName} ${lastName}`);
     });
 
     it('should format completed date field value correctly', () => {
-      expect(listFormatter.updated(mappingProfile)).toBe('12/4/2018');
+      expect(result.current.updated(mappingProfile)).toBe('12/4/2018');
     });
   });
 
   describe('executing with custom props', () => {
     const customFormatter = { deleted: record => record.deleted };
-    const listFormatter = getHookExecutionResult(useMappingProfileListFormatter, [customFormatter]);
+    const { result } = renderHook(() => useMappingProfileListFormatter(customFormatter), { wrapper });
 
     it('should support custom formatters - deleted', () => {
-      expect(listFormatter.deleted(mappingProfile)).toBeFalsy();
+      expect(result.current.deleted(mappingProfile)).toBeFalsy();
     });
   });
 });

lib/utils/tests/useFormattedMLCProps.test.js

@@ -1,4 +1,7 @@
-import { getHookExecutionResult } from '../../../test/jest/helpers';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { IntlProvider } from 'react-intl';
+import React from 'react';
 import { useFormattedMCLProps } from '../useFormattedMCLProps';
 
 describe('useFormattedMLCProps', () => {
@@ -8,16 +11,22 @@ describe('useFormattedMLCProps', () => {
     visibleColumns: ['id'],
   };
 
+  const wrapper = ({ children }) => (
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  );
+
   describe('calling without custom props', () => {
-    const hookResult = getHookExecutionResult(useFormattedMCLProps, [defaultProps]);
+    const { result } = renderHook(() => useFormattedMCLProps(defaultProps), { wrapper });
 
     it('should return formatted default props', () => {
-      expect(hookResult.visibleColumns.length).toEqual(1);
-      expect(hookResult.visibleColumns[0]).toEqual(defaultProps.visibleColumns[0]);
-      expect(Object.keys(hookResult.columnWidths).length).toEqual(1);
-      expect(hookResult.columnWidths.id).toEqual(defaultProps.columnWidths.id);
-      expect(Object.keys(hookResult.columnMapping).length).toEqual(1);
-      expect(hookResult.columnMapping.id).toEqual('stripes-data-transfer-components.name');
+      expect(result.current.visibleColumns.length).toEqual(1);
+      expect(result.current.visibleColumns[0]).toEqual(defaultProps.visibleColumns[0]);
+      expect(Object.keys(result.current.columnWidths).length).toEqual(1);
+      expect(result.current.columnWidths.id).toEqual(defaultProps.columnWidths.id);
+      expect(Object.keys(result.current.columnMapping).length).toEqual(1);
+      expect(result.current.columnMapping.id).toEqual('stripes-data-transfer-components.name');
     });
   });
 
@@ -27,18 +36,18 @@ describe('useFormattedMLCProps', () => {
       columnMapping: { title: 'stripes-data-transfer-components.jobProfilesTitle' },
       visibleColumns: ['id', 'title'],
     };
-    const hookResult = getHookExecutionResult(useFormattedMCLProps, [defaultProps, customProperties]);
+    const { result } = renderHook(() => useFormattedMCLProps(defaultProps, customProperties), { wrapper });
 
     it('should return formatted and combined props', () => {
-      expect(hookResult.visibleColumns.length).toEqual(2);
-      expect(hookResult.visibleColumns[0]).toEqual(customProperties.visibleColumns[0]);
-      expect(hookResult.visibleColumns[1]).toEqual(customProperties.visibleColumns[1]);
-      expect(Object.keys(hookResult.columnWidths).length).toEqual(2);
-      expect(hookResult.columnWidths.id).toEqual(defaultProps.columnWidths.id);
-      expect(hookResult.columnWidths.title).toEqual(customProperties.columnWidths.title);
-      expect(Object.keys(hookResult.columnMapping).length).toEqual(2);
-      expect(hookResult.columnMapping.id).toEqual('stripes-data-transfer-components.name');
-      expect(hookResult.columnMapping.title).toEqual('stripes-data-transfer-components.jobProfilesTitle');
+      expect(result.current.visibleColumns.length).toEqual(2);
+      expect(result.current.visibleColumns[0]).toEqual(customProperties.visibleColumns[0]);
+      expect(result.current.visibleColumns[1]).toEqual(customProperties.visibleColumns[1]);
+      expect(Object.keys(result.current.columnWidths).length).toEqual(2);
+      expect(result.current.columnWidths.id).toEqual(defaultProps.columnWidths.id);
+      expect(result.current.columnWidths.title).toEqual(customProperties.columnWidths.title);
+      expect(Object.keys(result.current.columnMapping).length).toEqual(2);
+      expect(result.current.columnMapping.id).toEqual('stripes-data-transfer-components.name');
+      expect(result.current.columnMapping.title).toEqual('stripes-data-transfer-components.jobProfilesTitle');
     });
   });
 });

package.json

@@ -33,6 +33,7 @@
     "@testing-library/dom": "^7.26.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^12.1.10",
     "babel-jest": "^26.1.0",
     "chai": "^4.2.0",

test/jest/helpers/index.js

@@ -1,3 +1,2 @@
 export { renderWithIntl } from './renderWithIntl';
 export { renderWithContext } from './renderWithContext';
-export { getHookExecutionResult } from './getHookExecutionResult';