test(packages): switch to RTL and use React 18

jest.config.js

@@ -26,4 +26,5 @@ module.exports = {
   transform: {
     '^.+\\.[t|j]sx?$': 'babel-jest',
   },
+  snapshotSerializers: [],
 };

jest.setup.js

@@ -12,5 +12,11 @@
  * under the License.
  */
 
+const { TextEncoder, TextDecoder } = require('util');
+
 require('core-js/stable');
 require('regenerator-runtime/runtime');
+
+// Issue with Jest this could be moved to amex-jest-preset-react
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

package.json

@@ -31,14 +31,13 @@
     "@babel/core": "^7.9.6",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
+    "@testing-library/react": "^14.1.2",
     "amex-jest-preset": "^7.0.0",
-    "amex-jest-preset-react": "^6.1.0",
+    "amex-jest-preset-react": "^8.1.0",
     "babel-jest": "^26.1.0",
     "babel-preset-amex": "^2.1.0",
     "core-js": "^3.6.4",
     "cross-env": "^7.0.3",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.2.2",
     "eslint": "^8.15.0",
     "eslint-config-amex": "^16.0.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -49,9 +48,8 @@
     "lerna": "^3.22.1",
     "lockfile-lint": "^4.1.0",
     "prettier": "^2.8.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-test-renderer": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.3"
   },
   "husky": {

packages/holocron-module-register-webpack-plugin/HolocronModuleRegisterPlugin.js

@@ -34,7 +34,7 @@ HolocronModuleRegisterPlugin.prototype.apply = function apply(compiler) {
             // descend into the source and inject the registration within the iife
             // The last two symbols are always the closing of the iife, then a `;`
             // Therefore, insert the registration immediately before the iife closes
-            // eslint-disable-next-line no-underscore-dangle, max-len -- webpack
+            // eslint-disable-next-line no-underscore-dangle -- webpack
             source._source._children.splice(-2, 0, `;Holocron.registerModule("${moduleName}", ${holocronModuleName});`);
           });
       });

packages/holocron-module-register-webpack-plugin/__tests__/HolocronModuleRegisterPlugin.spec.js

@@ -111,7 +111,7 @@ describe('HolocronModuleRegisterPlugin', () => {
     expect(fileContents.startsWith('/******/ (() => { // webpackBootstrap')).toBe(true);
     expect(fileContents).toContain('const ModuleWithAsyncImport = () =>');
     expect(fileContents).toContain('Holocron.registerModule("some-module", SomeModule);');
-    // eslint-disable-next-line max-len -- long assignment
+
     const asyncChunkContents = fs.readFileSync(path.join(buildPath, `async-import.${outputFileName}`)).toString();
     expect(asyncChunkContents).toContain('() => \'Hello, world\'');
     expect(asyncChunkContents).not.toContain('Holocron.registerModule("some-module"');

packages/holocron-module-route/__tests__/ModuleRoute.spec.jsx

@@ -13,24 +13,24 @@
  */
 
 import React from 'react';
-// eslint erroneously believes enzyme is not a dev dependency
-// eslint-disable-next-line import/no-extraneous-dependencies -- only used in tests
-import { shallow } from 'enzyme';
 
 import ModuleRoute from '../src/ModuleRoute';
+// eslint erroneously believes '@testing-library/react' is not a dev dependency
+// eslint-disable-next-line import/no-extraneous-dependencies -- only used in tests
+const { render } = require('@testing-library/react');
 
 describe('ModuleRoute', () => {
   console.error = jest.fn();
 
   beforeEach(() => console.error.mockClear());
 
   it('should log an error when render is attempted', () => {
-    shallow(<ModuleRoute />);
+    render(<ModuleRoute />);
     expect(console.error).toHaveBeenCalled();
   });
 
   it('should render null', () => {
-    expect(shallow(<ModuleRoute />)).toMatchSnapshot();
+    expect(render(<ModuleRoute />).asFragment()).toMatchInlineSnapshot('<DocumentFragment />');
   });
 
   it('should have a createModuleRouteFromElement method', () => {

packages/holocron-module-route/package.json

@@ -43,7 +43,7 @@
   "devDependencies": {
     "babel-loader": "^8.0.5",
     "holocron": "^1.9.2",
-    "react": "^16.13.1",
+    "react": "^18.2.0",
     "rimraf": "^2.5.4"
   },
   "repository": {

packages/holocron/__tests__/RenderModule.spec.jsx

@@ -14,15 +14,18 @@
 
 import React from 'react';
 import { ReactReduxContext } from 'react-redux';
+
+// eslint erroneously believes '@testing-library/react' is not a dev dependency
 // eslint-disable-next-line import/no-extraneous-dependencies -- only used in tests
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 import RenderModule from '../src/RenderModule';
 
 // eslint-disable-next-line react/prop-types -- disable for tests
 const MyTestModule = ({ children, ...otherProps }) => (
   <div>
-    {JSON.stringify(otherProps, undefined, 2)}
+    <h1>My test module</h1>
+    <p>Other Props: {JSON.stringify(otherProps)}</p>
     {children}
   </div>
 );
@@ -37,7 +40,8 @@ const store = {
         'my-test-module': true,
       },
     },
-  })),
+  })
+  ),
 };
 
 describe('RenderModule', () => {
@@ -48,63 +52,122 @@ describe('RenderModule', () => {
   it('should warn and render null when it cannot find a module in registry', () => {
     expect.assertions(2);
 
-    const tree = mount(
+    const { asFragment } = render(
       <ReactReduxContext.Provider value={{ store }}>
-        <RenderModule moduleName="not-in-module-map" />
+        <div id="module-wrapper">
+          <RenderModule moduleName="not-in-module-map" />
+        </div>
       </ReactReduxContext.Provider>
     );
-    expect(consoleWarn.mock.calls).toMatchSnapshot();
-    expect(tree).toMatchSnapshot();
+    expect(consoleWarn.mock.calls[0][0]).toMatchInlineSnapshot(
+      '"Module not-in-module-map was not found in the holocron module registry"'
+    );
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div
+          id="module-wrapper"
+        />
+      </DocumentFragment>
+    `);
   });
 
   it('should warn and render null when module is not loaded', () => {
     store.getState.mockImplementationOnce(() => fromJS({
       holocron: {
         loaded: {},
       },
-    }));
+    })
+    );
     expect.assertions(2);
 
-    const tree = mount(
+    const { asFragment } = render(
       <ReactReduxContext.Provider value={{ store }}>
-        <RenderModule moduleName="not-in-module-map" />
+        <div id="module-wrapper">
+          <RenderModule moduleName="not-in-module-map" />
+        </div>
       </ReactReduxContext.Provider>
     );
-    expect(consoleWarn.mock.calls).toMatchSnapshot();
-    expect(tree).toMatchSnapshot();
+    expect(consoleWarn.mock.calls[0][0]).toMatchInlineSnapshot(
+      '"Module not-in-module-map was not found in the holocron module registry"'
+    );
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div
+          id="module-wrapper"
+        />
+      </DocumentFragment>
+    `);
   });
 
   it('should render a module', () => {
     expect.assertions(1);
 
-    const tree = mount(
+    const { asFragment } = render(
       <ReactReduxContext.Provider value={{ store }}>
         <RenderModule moduleName="my-test-module" />
       </ReactReduxContext.Provider>
     );
-    expect(tree).toMatchSnapshot();
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          <h1>
+            My test module
+          </h1>
+          <p>
+            Other Props: {}
+          </p>
+        </div>
+      </DocumentFragment>
+    `);
   });
 
   it('should pass props to the module', () => {
     expect.assertions(1);
 
     const props = { hello: 'world', foo: 'bar' };
-    const tree = mount(
+    const { asFragment } = render(
       <ReactReduxContext.Provider value={{ store }}>
         <RenderModule moduleName="my-test-module" props={props} />
       </ReactReduxContext.Provider>
     );
-    expect(tree).toMatchSnapshot();
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          <h1>
+            My test module
+          </h1>
+          <p>
+            Other Props: {"hello":"world","foo":"bar"}
+          </p>
+        </div>
+      </DocumentFragment>
+    `);
   });
 
   it('should pass children to the module', () => {
     expect.assertions(1);
 
-    const tree = mount(
+    const { asFragment } = render(
       <ReactReduxContext.Provider value={{ store }}>
-        <RenderModule moduleName="my-test-module"><h1>Hello, world</h1></RenderModule>
+        <RenderModule moduleName="my-test-module">
+          <h1>Hello, world</h1>
+        </RenderModule>
       </ReactReduxContext.Provider>
     );
-    expect(tree).toMatchSnapshot();
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          <h1>
+            My test module
+          </h1>
+          <p>
+            Other Props: {}
+          </p>
+          <h1>
+            Hello, world
+          </h1>
+        </div>
+      </DocumentFragment>
+    `);
   });
 });