Merge pull request #293 from FormidableLabs/jp-upgrade-react

upgrade to React 17

Author: jpdriver

jest.setup.js

@@ -43,22 +43,21 @@
     "@rollup/plugin-replace": "^3.0.0",
     "@storybook/addon-controls": "^6.4.13",
     "@storybook/react": "^6.4.13",
-    "@types/react": "^16.0.36",
+    "@types/react": "^17.0.38",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^8.7.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "jest": "^27.0.6",
     "prettier": "^2.5.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "rollup": "^2.55.1",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -95,9 +94,6 @@
   ],
   "jest": {
     "rootDir": "./src",
-    "setupFiles": [
-      "../jest.setup.js"
-    ],
     "testURL": "http://localhost/"
   },
   "sideEffects": false

package.json

@@ -1,6 +1,6 @@
 import React from "react";
 import errorBoundary from "../transpile/errorBoundary";
-import { render } from "enzyme";
+import { render } from "./renderer";
 
 describe("errorBoundary", () => {
   it("should wrap PFCs in an error boundary", () => {

src/utils/test/errorBoundary.test.js

@@ -0,0 +1,16 @@
+import ShallowRenderer from "react-test-renderer/shallow";
+import ReactDOMServer from "react-dom/server";
+
+const renderShallow = (Component) => {
+  const renderer = new ShallowRenderer();
+  renderer.render(Component);
+  return renderer.getRenderOutput();
+};
+
+export const render = (Component) =>
+  ReactDOMServer.renderToStaticMarkup(renderShallow(Component)) || null;
+
+export const shallow = (Component) => ({
+  html: () => render(Component),
+  text: () => renderShallow(Component).props.children,
+});

src/utils/test/renderer.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { generateElement, renderElementAsync } from "../transpile";
-import { shallow } from "enzyme";
+import { shallow } from "./renderer";
 
 describe("transpile", () => {
   describe("generateElement", () => {