UIORGS-377: upgrade React adn Node.js to v18

.eslintrc

@@ -5,5 +5,16 @@
     {
       "files": [ "src/**/tests/*", "test/**/*" ]
     }
-  ]
+  ],
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["__mock__", "./test/jest/__mock__"],
+          ["fixtures", "./test/jest/fixtures"],
+          ["helpers", "./test/jest/helpers"]
+        ]
+      }
+    }
+  }
 }

.github/workflows/build-npm-release.yml

@@ -28,7 +28,7 @@ jobs:
       FOLIO_NPM_REGISTRY: 'https://repository.folio.org/repository/npm-folio/'
       FOLIO_NPM_REGISTRY_AUTH: '//repository.folio.org/repository/npm-folio/'
       FOLIO_MD_REGISTRY: 'https://folio-registry.dev.folio.org'
-      NODEJS_VERSION: '16'
+      NODEJS_VERSION: '18'
       JEST_JUNIT_OUTPUT_DIR: 'artifacts/jest-junit'
       JEST_COVERAGE_REPORT_DIR: 'artifacts/coverage-jest/lcov-report/'
       BIGTEST_JUNIT_OUTPUT_DIR: 'artifacts/runTest'

.github/workflows/build-npm.yml

@@ -25,7 +25,7 @@ jobs:
       FOLIO_NPM_REGISTRY: 'https://repository.folio.org/repository/npm-folioci/'
       FOLIO_NPM_REGISTRY_AUTH: '//repository.folio.org/repository/npm-folioci/'
       FOLIO_MD_REGISTRY: 'https://folio-registry.dev.folio.org'
-      NODEJS_VERSION: '16'
+      NODEJS_VERSION: '18'
       JEST_JUNIT_OUTPUT_DIR: 'artifacts/jest-junit'
       JEST_COVERAGE_REPORT_DIR: 'artifacts/coverage-jest/lcov-report/'
       BIGTEST_JUNIT_OUTPUT_DIR: 'artifacts/runTest'

CHANGELOG.md

@@ -1,12 +1,14 @@
 # Change history for ui-organizations
 
-## 4.1.0 (IN PROGRESS)
+## 5.0.0 (IN PROGRESS)
 
 * Unpin `@rehooks/local-storage` now that it's no longer broken. Refs UIORGS-344.
 * Add `Note` field to contact people summary list. Refs UIORGS-352.
 * Organizations filters consistency in `ui-organizations` and `ui-plugin-find-organization` . Refs UIORGS-373.
 * No pop-up message when creating or editing an organization. Refs UIORGS-375.
 * Introduce new permission to view all organizations' settings. Refs UIORGS-346.
+* *BREAKING* Upgrade React to v18. Refs UIORGS-377.
+* Upgrade `Node.js` to `18` version in GitHub Actions. Refs UIORGS-378.
 
 ## [4.0.0](https://github.com/folio-org/ui-organizations/tree/v4.0.0) (2023-02-22)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v3.3.1...v4.0.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

@@ -1,6 +1,6 @@
 {
   "name": "@folio/organizations",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Organizations",
   "main": "index.js",
   "repository": "folio-org/ui-organizations",
@@ -251,15 +251,11 @@
     "@bigtest/interactor": "^0.9.2",
     "@bigtest/mocha": "^0.5.2",
     "@bigtest/react": "^0.1.2",
-    "@folio/eslint-config-stripes": "^6.1.0",
-    "@folio/stripes": "^8.0.0",
-    "@folio/stripes-cli": "^2.4.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": "^4.2.16",
-    "@testing-library/dom": "^7.31.2",
-    "@testing-library/jest-dom": "^5.11.1",
-    "@testing-library/react": "^11.0.2",
-    "@testing-library/react-hooks": "^3.7.0",
-    "@testing-library/user-event": "^12.8.1",
     "babel-jest": "^26.3.0",
     "chai": "^4.2.0",
     "core-js": "^3.6.4",
@@ -271,11 +267,9 @@
     "eslint-plugin-testing-library": "4.6.0",
     "faker": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.4.2",
-    "jest-junit": "^12.0.0",
     "miragejs": "^0.1.32",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intl": "^5.7.1",
     "react-query": "^3.23.2",
     "react-redux": "^8.0.5",
@@ -288,7 +282,7 @@
   },
   "dependencies": {
     "@folio/plugin-find-organization": "^4.0.0",
-    "@folio/stripes-acq-components": "~4.0.0",
+    "@folio/stripes-acq-components": "~5.0.0",
     "lodash": "^4.17.5",
     "moment-timezone": "^0.5.20",
     "prop-types": "^15.5.10",
@@ -298,9 +292,9 @@
     "redux-form": "^8.3.0"
   },
   "peerDependencies": {
-    "@folio/stripes": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@folio/stripes": "^9.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intl": "^5.7.1",
     "react-redux": "^8.0.5",
     "react-router": "^5.2.0",

src/ContactPeople/ContactPerson/ContactPerson.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { contact } from '../../../test/jest/fixtures';
+import { contact } from 'fixtures';
 import ContactPerson from './ContactPerson';
 
 const defaultProps = {

src/OrganizationIntegration/OrganizationIntegrationCreate/OrganizationIntegrationCreate.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 
 import { useOrganization } from '@folio/stripes-acq-components';
 
-import { organization } from '../../../test/jest/fixtures';
+import { organization } from 'fixtures';
 import { history, location } from '../../../test/jest/routerMocks';
 
 import { useIntegrationConfigMutation } from '../../common/hooks';

src/OrganizationIntegration/OrganizationIntegrationEdit/OrganizationIntegrationEdit.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 
 import { useOrganization } from '@folio/stripes-acq-components';
 
-import { organization } from '../../../test/jest/fixtures';
+import { organization } from 'fixtures';
 import { history, location } from '../../../test/jest/routerMocks';
 
 import {

src/OrganizationIntegration/OrganizationIntegrationForm/OrganizationIntegrationForm.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { queryHelpers } from '@testing-library/dom';
-import user from '@testing-library/user-event';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+import { queryHelpers } from '@folio/jest-config-stripes/testing-library/dom';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { useHistory } from 'react-router';
 
@@ -99,10 +99,10 @@ describe('OrganizationIntegrationForm', () => {
       ).toBe(sections.length);
     });
 
-    it('should collapse sections when Collapse all button is pressed', () => {
+    it('should collapse sections when Collapse all button is pressed', async () => {
       const { container } = renderOrganizationIntegrationForm();
 
-      user.click(screen.getByText('stripes-components.collapseAll'));
+      await user.click(screen.getByText('stripes-components.collapseAll'));
 
       const sections = queryAllByClass(container, 'defaultCollapseButton');