STCOR-729 update test deps for react v18 (#1330)

Missed a few test-related deps in #1324. Additionally, convert from
local deps/config to importing from jest-config-stripes.

Refs STCOR-729

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Use tenant query param for password reset. Refs STCOR-724.
 * Improve login error message when back-end not ready. Refs STCOR-723.
 * Replace `align-items: start` with `flex-start`; it is more widely supported. Refs STCOR-722.
+* *BREAKING* bump `react` to `v18`, and dev-deps accordingly. Refs STCOR-729.
 * Added `consortiaServices` utils to hold common consortia helpers. Refs STCOR-733.
 
 ## [9.0.0](https://github.com/folio-org/stripes-core/tree/v9.0.0) (2023-01-30)

jest.config.js

@@ -1,33 +1,10 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 const path = require('path');
-
-const esModules = ['@folio', 'ky', 'uuid'].join('|');
+const config = require('@folio/jest-config-stripes');
 
 module.exports = {
-  collectCoverageFrom: [
-    '**/(lib|src)/**/*.{js,jsx}',
-    '!**/node_modules/**',
-    '!**/test/**',
+  ...config,
+  setupFiles: [
+    ...config.setupFiles,
+    path.join(__dirname, './test/jest/setupFiles.js'),
   ],
-  coverageDirectory: './artifacts/coverage-jest/',
-  coverageReporters: ['lcov'],
-  reporters: ['jest-junit', 'default'],
-  transform: {
-    '^.+\\.(js|jsx)$': path.join(__dirname, './test/jest/jest-transformer.js'),
-  },
-  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
-  moduleNameMapper: {
-    '^.+\\.(css)$': 'identity-obj-proxy',
-    '^.+\\.(svg)$': 'identity-obj-proxy',
-    'ky': 'ky/umd',
-    'uuid': require.resolve('uuid'), // https://github.com/uuidjs/uuid/issues/451
-  },
-  testEnvironment: 'jsdom',
-  testMatch: ['**/(lib|src)/**/?(*.)test.{js,jsx}'],
-  testPathIgnorePatterns: ['/node_modules/', '/test/ui-testing/', '/test/bigtest/'],
-  setupFiles: [path.join(__dirname, './test/jest/setupTests.js')],
-  setupFilesAfterEnv: [path.join(__dirname, './test/jest/jest.setup.js')],
-
-  roots: ['<rootDir>', './src'],
-  modulePaths: ['<rootDir>', './src'],
 };

package.json

@@ -45,29 +45,15 @@
     "@bigtest/mirage": "^0.0.1",
     "@bigtest/mocha": "^0.5.1",
     "@folio/eslint-config-stripes": "^7.0.0",
+    "@folio/jest-config-stripes": "^2.0.0",
     "@folio/stripes-cli": "^3.0.0",
     "@folio/stripes-components": "^12.0.0",
     "@folio/stripes-connect": "^9.0.0",
     "@folio/stripes-logger": "^1.0.0",
     "@folio/stripes-testing": "^3.1.0",
     "@formatjs/cli": "^4.2.2",
-    "@jest/globals": "^28.0.1",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.1.1",
-    "babel-jest": "^28.0.1",
-    "babel-plugin-module-resolver": "^4.1.0",
     "chai": "^4.1.2",
     "eslint": "^7.32.0",
-    "eslint-plugin-jest-dom": "^4.0.2",
-    "eslint-plugin-testing-library": "^5.6.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.0.1",
-    "jest-canvas-mock": "^2.3.1",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-junit": "^13.2.0",
     "miragejs": "^0.1.32",
     "moment": "^2.29.0",
     "react": "^18.2.0",
@@ -76,8 +62,6 @@
     "react-redux": "^8.0.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "sinon": "^7.3.2",
-    "sinon-chai": "^3.3.0",
     "stylelint": "^8.2.0",
     "stylelint-config-standard": "^17.0.0",
     "stylelint-junit-formatter": "^0.2.1"

src/components/About/AboutInstallMessages.test.js

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 import { createMemoryHistory } from 'history';
 
 import AboutInstallMessages, {

src/components/MainNav/ProfileDropdown/ProfileDropdown.test.js

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { ModulesContext } from '../../../ModulesContext';

src/components/OrganizationLogo/OrganizationLogo.css

@@ -18,7 +18,6 @@
   }
 }
 
-
 @media (--medium-down) {
   .logo {
     margin-top: 0;

src/components/StaleBundleWarning.test.js

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 
 import { useQuery } from 'react-query';
 

src/queries/useConfigurations.test.js

@@ -2,7 +2,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from 'react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@folio/jest-config-stripes/testing-library/react';
 
 import useConfigurations, { configurationsApi } from './useConfigurations';
 import { useStripes } from '../StripesContext';
@@ -73,10 +73,14 @@ describe('Given useConfigurations', () => {
         </QueryClientProvider>
       );
 
-      const { result, waitFor } = renderHook(() => useConfigurations({}), { wrapper });
+      const { result } = renderHook(() => useConfigurations({}), { wrapper });
 
+      // waitFor retries until it stops catching an error
+      // so we convert isLoading from being truthy to being errory
       await waitFor(() => {
-        return !result.current.isLoading;
+        if (result.current.isLoading) {
+          throw Error('kaboom');
+        }
       });
 
       expect(result.current.data).toEqual(response);
@@ -105,10 +109,14 @@ describe('Given useConfigurations', () => {
         </QueryClientProvider>
       );
 
-      const { result, waitFor } = renderHook(() => useConfigurations({}), { wrapper });
+      const { result } = renderHook(() => useConfigurations({}), { wrapper });
 
+      // waitFor retries until it stops catching an error
+      // so we convert isLoading from being truthy to being errory
       await waitFor(() => {
-        return !!result.current.error;
+        if (result.current.isLoading) {
+          throw new Error('Kaboom');
+        }
       });
 
       expect(result.current.error.message).toMatch(/configuration.entries.collection.get/);

src/queries/useOkapiEnv.test.js

@@ -2,7 +2,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from 'react-query';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@folio/jest-config-stripes/testing-library/react';
 
 import useOkapiEnv from './useOkapiEnv';
 import { useStripes } from '../StripesContext';
@@ -48,10 +48,14 @@ describe('Given useOkapiEnv', () => {
         </QueryClientProvider>
       );
 
-      const { result, waitFor } = renderHook(() => useOkapiEnv({}), { wrapper });
+      const { result } = renderHook(() => useOkapiEnv({}), { wrapper });
 
+      // waitFor retries until it stops catching an error
+      // so we convert isLoading from being truthy to being errory
       await waitFor(() => {
-        return !result.current.isLoading;
+        if (result.current.isLoading) {
+          throw new Error('Kaboom');
+        }
       });
 
       expect(result.current.data).toEqual({ MONKEY: 'bagel' });
@@ -80,10 +84,14 @@ describe('Given useOkapiEnv', () => {
         </QueryClientProvider>
       );
 
-      const { result, waitFor } = renderHook(() => useOkapiEnv({}), { wrapper });
+      const { result } = renderHook(() => useOkapiEnv({}), { wrapper });
 
+      // waitFor retries until it stops catching an error
+      // so we convert isLoading from being truthy to being errory
       await waitFor(() => {
-        return !!result.current.error;
+        if (result.current.isLoading) {
+          throw new Error('Kaboom');
+        }
       });
 
       expect(result.current.error.message).toMatch(/okapi.env.list/);

test/jest/helpers/renderWithRouter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Router } from 'react-router-dom';
-import { render } from '@testing-library/react';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
 import { createMemoryHistory } from 'history';
 import componentsTranslations from '@folio/stripes-components/translations/stripes-components/en';
 import stripesCoreTranslations from '../../../translations/stripes-core/en';