UIPBEX-57 bump up react version

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## 3.0.0 (IN PROGRESS)
 * Support `feesfines` interface version `18.0`. Refs UIPBEX-45.
 * *BREAKING* bump `react-intl` to `v6.4.4`. Refs UICAL-275
+* *BREAKING* Upgrade react v18.0.0. Refs FOLIO-3876.
+* *BREAKING* Upgrade dependent modules.
 
 ## [2.4.0](https://github.com/folio-org/ui-plugin-bursar-export/tree/v2.4.0) (2023-02-20)
 [Full Changelog](https://github.com/folio-org/ui-plugin-bursar-export/compare/v2.3.0...v2.4.0)

jest.config.js

@@ -1 +1,12 @@
-module.exports = require('@folio/stripes-acq-components/jest.config');
+const path = require('path');
+const stripesConfig = require('@folio/jest-config-stripes');
+const acqConfig = require('@folio/stripes-acq-components/jest.config');
+
+module.exports = {
+  ...stripesConfig,
+  setupFiles: [
+    ...stripesConfig.setupFiles,
+    ...acqConfig.setupFiles,
+    path.join(__dirname, './test/jest/setupFiles.js'),
+  ],
+};

package.json

@@ -55,40 +55,32 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@babel/eslint-parser": "^7.18.2",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.7.4",
-    "@babel/eslint-parser": "^7.18.2",
-    "@folio/eslint-config-stripes": "^5.0.0",
-    "@folio/stripes": "^8.0.0",
-    "@folio/stripes-cli": "^2.0.0",
+    "@folio/eslint-config-stripes": "^7.0.0",
+    "@folio/jest-config-stripes": "^2.0.0",
+    "@folio/stripes": "^9.0.0",
+    "@folio/stripes-cli": "^3.0.0",
     "@formatjs/cli": "^6.1.3",
-    "@testing-library/jest-dom": "^5.11.1",
-    "@testing-library/react": "^11.0.4",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^12.1.10",
-    "babel-jest": "^26.3.0",
     "core-js": "^3.6.1",
     "eslint": "^6.2.1",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-jest": "^23.0.4",
     "faker": "^4.1.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.4.2",
-    "jest-css-modules": "^2.1.0",
-    "jest-junit": "^11.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intl": "^6.4.4",
     "react-query": "^3.6.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.3"
   },
   "dependencies": {
-    "@folio/stripes-acq-components": "~4.0.0",
+    "@folio/stripes-acq-components": "~5.0.0",
     "lodash": "^4.17.5",
     "prop-types": "^15.5.10",
     "react-final-form": "^6.3.0",
@@ -97,11 +89,11 @@
     "react-router-prop-types": "^1.0.4"
   },
   "peerDependencies": {
-    "@folio/stripes": "^8.0.0",
+    "@folio/stripes": "^9.0.0",
     "final-form": "^4.18.2",
     "final-form-arrays": "^3.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^118.2.0",
     "react-intl": "^6.4.4",
     "react-query": "^3.6.0",
     "react-router": "^5.2.0",

src/BursarExports.test.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import user from '@testing-library/user-event';
 
-import '@folio/stripes-acq-components/test/jest/__mock__';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
 
 import {
   useBursarConfigQuery,
@@ -87,14 +86,14 @@ describe('BursarExports', () => {
     expect(queryByText(BursarExportsConfiguration)).toBeNull();
   });
 
-  it('should call query mutator when form is submitted via save button', () => {
+  it('should call query mutator when form is submitted via save button', async () => {
     const mutateBursarConfig = jest.fn();
 
     useBursarConfigMutation.mockReturnValue({ mutateBursarConfig });
 
     const { getByText } = renderBursarExports();
 
-    user.click(getByText('ui-plugin-bursar-export.bursarExports.save'));
+    await user.click(getByText('ui-plugin-bursar-export.bursarExports.save'));
 
     expect(mutateBursarConfig).toHaveBeenCalled();
   });

src/BursarExportsConfiguration/BursarExportsConfiguration.test.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
-import user from '@testing-library/user-event';
 
-import '@folio/stripes-acq-components/test/jest/__mock__';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
 
 import { BursarExportsConfiguration } from './BursarExportsConfiguration';
 import { SCHEDULE_PERIODS } from './constants';
@@ -73,41 +72,41 @@ describe('BursarExportsConfiguration', () => {
   });
 
   describe('None period', () => {
-    it('should should define schedule frequency when period is changed from None', () => {
+    it('should should define schedule frequency when period is changed from None', async () => {
       const { getByTestId } = renderBursarExportsConfiguration({
         initialValues: {
           schedulePeriod: SCHEDULE_PERIODS.none,
         },
       });
 
-      user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.days);
+      await user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.days);
 
       const schedulePeriodField = getByTestId('schedule-frequency');
 
       expect(schedulePeriodField).toBeDefined();
       expect(schedulePeriodField.value).toBeDefined();
     });
 
-    it('should reset scheduleFrequency when period is changed to None', () => {
+    it('should reset scheduleFrequency when period is changed to None', async () => {
       const { queryByTestId, getByTestId } = renderBursarExportsConfiguration({
         initialValues: {
           schedulePeriod: SCHEDULE_PERIODS.days,
         },
       });
 
-      user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.none);
+      await user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.none);
 
       expect(queryByTestId('schedule-frequency')).toBeNull();
     });
 
-    it('should reset scheduleTime when period is changed to None', () => {
+    it('should reset scheduleTime when period is changed to None', async () => {
       const { queryByText, getByTestId } = renderBursarExportsConfiguration({
         initialValues: {
           schedulePeriod: SCHEDULE_PERIODS.days,
         },
       });
 
-      user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.none);
+      await user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.none);
 
       expect(queryByText('ui-plugin-bursar-export.bursarExports.scheduleTime')).toBeNull();
     });
@@ -126,14 +125,14 @@ describe('BursarExportsConfiguration', () => {
       expect(queryByText('ui-plugin-bursar-export.bursarExports.scheduleWeekdays')).toBeNull();
     });
 
-    it('should reset scheduleTime when period is changed to Hours', () => {
+    it('should reset scheduleTime when period is changed to Hours', async () => {
       const { queryByText, getByTestId } = renderBursarExportsConfiguration({
         initialValues: {
           schedulePeriod: SCHEDULE_PERIODS.days,
         },
       });
 
-      user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.hours);
+      await user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.hours);
 
       expect(queryByText('ui-plugin-bursar-export.bursarExports.scheduleTime')).toBeNull();
     });
@@ -170,14 +169,14 @@ describe('BursarExportsConfiguration', () => {
       expect(queryByText('ui-plugin-bursar-export.bursarExports.scheduleWeekdays')).not.toBeNull();
     });
 
-    it('should reset scheduleWeekdays when period is changed to any periods', () => {
+    it('should reset scheduleWeekdays when period is changed to any periods', async () => {
       const { queryByText, getByTestId } = renderBursarExportsConfiguration({
         initialValues: {
           schedulePeriod: SCHEDULE_PERIODS.weeks,
         },
       });
 
-      user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.hours);
+      await user.selectOptions(getByTestId('schedule-period'), SCHEDULE_PERIODS.hours);
 
       expect(queryByText('ui-plugin-bursar-export.bursarExports.scheduleWeekdays')).toBeNull();
     });

src/BursarExportsManualRunner/BursarExportsManualRunner.test.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import user from '@testing-library/user-event';
 
-import '@folio/stripes-acq-components/test/jest/__mock__';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
 
 import {
   useBursarExportScheduler,
@@ -30,7 +29,7 @@ describe('BursarExportsManualRunner', () => {
     });
   });
 
-  it('should call query action with form params when button is pressed', () => {
+  it('should call query action with form params when button is pressed', async () => {
     const scheduleBursarExport = jest.fn();
     const exportTypeSpecificParameters = {
       daysOutstanding: 2,
@@ -49,7 +48,7 @@ describe('BursarExportsManualRunner', () => {
       },
     });
 
-    user.click(getByText('ui-plugin-bursar-export.bursarExports.runManually'));
+    await user.click(getByText('ui-plugin-bursar-export.bursarExports.runManually'));
 
     expect(scheduleBursarExport).toHaveBeenCalledWith(exportTypeSpecificParameters);
   });

test/jest/__mock__/createRange.mock.js

@@ -0,0 +1 @@
+global.document.createRange = jest.fn(() => new Range());

test/jest/__mock__/index.js

@@ -0,0 +1 @@
+import './createRange.mock';

test/jest/setupFiles.js

@@ -0,0 +1 @@
+import './__mock__';