build(deps): Upgrade to React 17

Default to production mode when webpack compiling. Prevents unwanted fetch calls showing up in fetch mock calls.

.github/workflows/release.yml

@@ -14,9 +14,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build API
-        run: yarn build-api
+        run: yarn build:api
       - name: Test API
-        run: yarn test-api
+        run: yarn test:api
       - name: Build UI
         run: yarn build
       - name: Test UI

bin/cli.js

@@ -7,7 +7,7 @@ const { startServer } = require("../server/build/server");
 
 const [mode = "default"] = process.argv.slice(2);
 
-process.env.NODE_ENV = process.env.NODE_ENV || "development";
+process.env.NODE_ENV = "production";
 
 const runCli = () => {
   runner();

package.json

@@ -3,25 +3,25 @@
   "version": "0.0.0-development",
   "description": "Testing UI",
   "dependencies": {
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^26.0.19",
     "@types/node": "^14.11.2",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.5",
     "express": "^4.17.1",
     "glob": "^7.1.6",
     "jsdom": "^16.4.0",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-json-editor-ajrm": "^2.5.13",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "4.0.1",
     "tailwindcss": "1.9.0",
     "ts-loader": "^8.0.7",
     "ts-morph": "^8.1.2",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.3",
     "uuid": "^8.0.0"
   },
   "devDependencies": {
@@ -33,19 +33,16 @@
     "ts-jest": "^26.4.1",
     "ts-node-dev": "^1.0.0"
   },
-  "resolutions": {
-    "**/@typescript-eslint/eslint-plugin": "^4.1.1",
-    "**/@typescript-eslint/parser": "^4.1.1"
-  },
   "bin": {
     "testbook": "bin/cli.js"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "build-api": "tsc --project server/tsconfig.json",
+    "build:api": "tsc --project server/tsconfig.json",
     "test": "react-scripts test",
-    "test-api": "jest --config server/jest.config.json",
+    "test:api": "jest --config server/jest.config.json",
+    "debug:api": "NODE_ENV=production TS_NODE_PROJECT=server/tsconfig.json node -r ts-node/register --inspect-brk server/server.ts ../build",
     "eject": "react-scripts eject",
     "build:tailwind": "tailwindcss build src/index.tailwind.css -o src/index.css",
     "prestart": "npm run build:tailwind",

server/render.ts

@@ -52,7 +52,7 @@ const getWrapperComponent = () => {
   return Promise.resolve();
 };
 
-const render = (WrapperComponent) =>
+const render = (WrapperComponent): Promise<void> =>
   new Promise((resolve) => {
     act(() => {
       ReactDOM.render(
@@ -73,11 +73,12 @@ const render = (WrapperComponent) =>
     });
   });
 
-window.result = getWrapperComponent().then((WrapperComponent) =>
-  render(WrapperComponent).then(
-    () =>
-      new Promise((resolve, reject) =>
-        setTimeout(() => (window.error ? reject(window.error) : resolve()), 0)
-      )
-  )
+window.result = getWrapperComponent().then(
+  (WrapperComponent): Promise<void> =>
+    render(WrapperComponent).then(
+      () =>
+        new Promise((resolve, reject) =>
+          setTimeout(() => (window.error ? reject(window.error) : resolve()), 0)
+        )
+    )
 );

server/server.ts

@@ -156,7 +156,7 @@ const compileModuleWithHostWebpack = (
   const craWebpackConfig = require(path.join(
     hostNodeModulesPath,
     "react-scripts/config/webpack.config"
-  ))(process.env.NODE_ENV);
+  ))("production");
   const outputModulePath = modulePath.replace(/\.[^.]+$/, ".js");
 
   return new Promise((resolve, reject) =>
@@ -194,15 +194,13 @@ const compileModuleWithHostWebpack = (
   );
 };
 
-const compileWrapperWithWebpack = (
-  wrapperModulePath: string
-): Promise<string> =>
+const compileWithWebpack = (modulePath: string): Promise<string> =>
   new Promise((resolve, reject) =>
     webpack(
       {
-        entry: [wrapperModulePath],
+        entry: [modulePath],
         output: {
-          filename: path.basename(wrapperModulePath),
+          filename: path.basename(modulePath),
         },
         module: {
           rules: [
@@ -235,10 +233,7 @@ const compileWrapperWithWebpack = (
 
         return resolve(
           path.resolve(
-            path.join(
-              stats.toJson().outputPath,
-              path.basename(wrapperModulePath)
-            )
+            path.join(stats.toJson().outputPath, path.basename(modulePath))
           )
         );
       }
@@ -268,7 +263,6 @@ const compileWrapperAndModuleWithWebpack = (
         output: {
           filename: path.join(path.basename(wrapperModulePath), moduleFilename),
         },
-        mode: "development",
         module: {
           rules: [
             {
@@ -608,7 +602,7 @@ const render = (
     });
 
 const setupVmContextWithContainerAndMocks = (): Promise<[Context, Logger]> =>
-  compileWrapperWithWebpack(require.resolve("./setupContainerAndMocks")).then(
+  compileWithWebpack(require.resolve("./setupContainerAndMocks")).then(
     (moduleCode) => {
       const script = new Script(moduleCode);
       const logger = setupConsoleLogger();

src/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import Nav from "./Nav";

src/Components.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import LoadingIndicator from "./LoadingIndicator";
 import StatusLink from "./StatusLink";
 import { TestDefinition } from "./Test";

src/LoadingIndicator.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const LoadingIndicator: React.FC = ({ children }) => (
   <div className="flex h-full">

src/Modal.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
+import * as React from "react";
 
 function useKeyboardEvent(key: string, callback: () => void) {
   useEffect(() => {

src/Nav.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 
 const Nav = () => (

src/StatusLink.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Link as RouterLink } from "react-router-dom";
 
 const stepClassNames: { [key: string]: string } = {

src/Tests.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import * as React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
 import StatusLink from "./StatusLink";

src/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";

src/test/EditMockModal.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import * as React from "react";
 // @ts-ignore
 import JSONInput from "react-json-editor-ajrm";
 // @ts-ignore

src/test/EditRenderPropsModal.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import * as React from "react";
 import { renderStepLabel } from "./Step";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "../Modal";
 import type { EditStepProps } from "./EditMockModal";

src/test/EditRenderWrapperModal.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import * as React from "react";
 import { renderStepLabel } from "./Step";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "../Modal";
 import type { EditStepProps } from "./EditMockModal";

src/test/SelectedMockCallModal.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "../Modal";
 import type { StepDefinition, MockCall } from "../Test";
 

src/test/SelectedRegionModal.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "../Modal";
 import type { StepDefinition, RegionDefinition } from "../Test";
 

src/test/Step.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import StatusLink from "../StatusLink";
 import type { StepDefinition, StepResult } from "../Test";
 import { renderMockCallArgsLabel } from "./SelectedMockCallModal";

src/test/StepResultModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "../Modal";
 import type { StepDefinition, StepResult } from "../Test";
 import { renderStepLabel } from "./Step";
@@ -22,10 +22,10 @@ const StepResultModal = ({
       </ModalHeader>
       {error &&
         Object.entries(error).map(([key, value]) => (
-          <React.Fragment key={key}>
+          <Fragment key={key}>
             <h2 className="font-bold mt-2 mb-1">{capitalise(key)}</h2>
             <code className="whitespace-pre-line text-xs">{value}</code>
-          </React.Fragment>
+          </Fragment>
         ))}
     </ModalBody>
     <ModalFooter>

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -13,7 +13,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }