@khanacademy/wonder-blocks-testing-core 2.2.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-testing-core
 
+## 3.0.0
+
+### Major Changes
+
+- 38c926c: Upgrade WB to using react-router-dom-v5-compat.
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { StaticRouter, MemoryRouter, useLocation, Switch, Route } from 'react-router-dom';
+import { StaticRouter, MemoryRouter, Switch, Route } from 'react-router-dom';
+import { CompatRouter, useLocation } from 'react-router-dom-v5-compat';
 import _extends from '@babel/runtime/helpers/extends';
 import * as ReactDOMServer from 'react-dom/server';
 
@@ -305,19 +306,21 @@ const MaybeWithRoute = ({
   path,
   configLocation
 }) => {
-  const actualLocation = useLocation();
-  const configuredLocation = typeof configLocation === "string" ? configLocation : configLocation.pathname;
   if (path == null) {
     return React.createElement(React.Fragment, null, children);
   }
+  const ErrorElement = () => {
+    const actualLocation = useLocation();
+    const configuredLocation = typeof configLocation === "string" ? configLocation : configLocation.pathname;
+    const errorMessage = `The current location '${actualLocation.pathname}' ` + `does not match the configured path '${path}'. ` + `Did you provide the correct configured ` + `location, '${configuredLocation}', or did the ` + `routing lead to a different place than you ` + `expected?`;
+    throw new Error(errorMessage);
+  };
   return React.createElement(Switch, null, React.createElement(Route, {
-    exact: true,
-    path: path
-  }, children), React.createElement(Route, {
+    path: path,
+    render: () => React.createElement(React.Fragment, null, children)
+  }), React.createElement(Route, {
     path: "*",
-    render: () => {
-      throw new Error(`The current location '${actualLocation.pathname}' ` + `does not match the configured path '${path}'. ` + `Did you provide the correct configured ` + `location, '${configuredLocation}', or did the ` + `routing lead to a different place than you ` + `expected?`);
-    }
+    component: ErrorElement
   }));
 };
 const adapter = (children, config) => {
@@ -328,21 +331,30 @@ const adapter = (children, config) => {
     };
   }
   if ("forceStatic" in config && config.forceStatic) {
+    if (config.disableCompatRouter) {
+      return React.createElement(StaticRouter, {
+        location: config.location,
+        context: {}
+      }, React.createElement(MaybeWithRoute, {
+        path: config.path,
+        configLocation: config.location
+      }, children));
+    }
     return React.createElement(StaticRouter, {
       location: config.location,
       context: {}
-    }, React.createElement(MaybeWithRoute, {
+    }, React.createElement(CompatRouter, null, React.createElement(MaybeWithRoute, {
       path: config.path,
       configLocation: config.location
-    }, children));
+    }, children)));
   }
   if ("location" in config && config.location !== undefined) {
     return React.createElement(MemoryRouter, {
       initialEntries: [config.location]
-    }, React.createElement(MaybeWithRoute, {
+    }, React.createElement(CompatRouter, null, React.createElement(MaybeWithRoute, {
       path: config.path,
       configLocation: config.location
-    }, children));
+    }, children)));
   }
   if (!("initialEntries" in config) || config.initialEntries === undefined) {
     throw new Error("A location or initial history entries must be provided.");
@@ -354,13 +366,10 @@ const adapter = (children, config) => {
   if (config.initialIndex != null) {
     routerProps.initialIndex = config.initialIndex;
   }
-  if (config.getUserConfirmation != null) {
-    routerProps.getUserConfirmation = config.getUserConfirmation;
-  }
-  return React.createElement(MemoryRouter, routerProps, React.createElement(MaybeWithRoute, {
+  return React.createElement(MemoryRouter, routerProps, React.createElement(CompatRouter, null, React.createElement(MaybeWithRoute, {
     path: config.path,
     configLocation: entries[(_config$initialIndex = config.initialIndex) != null ? _config$initialIndex : 0]
-  }, children));
+  }, children)));
 };
 
 const DefaultAdapters = {

package/dist/harness/adapters/adapters.d.ts

@@ -19,11 +19,11 @@ export declare const DefaultAdapters: {
     readonly router: import("../types").TestHarnessAdapter<string | Readonly<{
         initialEntries: import("history").LocationDescriptor<unknown>[] | undefined;
         initialIndex?: number | undefined;
-        getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined;
         path?: string;
     } | {
         location: import("history").LocationDescriptor;
         forceStatic: true;
+        disableCompatRouter?: boolean;
         path?: string;
     } | {
         location: import("history").LocationDescriptor;

package/dist/harness/adapters/router.d.ts

@@ -15,10 +15,6 @@ type Config = Readonly<{
      * See MemoryRouter prop for initialIndex.
      */
     initialIndex?: MemoryRouterProps["initialIndex"];
-    /**
-     * See MemoryRouter prop for getUserConfirmation.
-     */
-    getUserConfirmation?: MemoryRouterProps["getUserConfirmation"];
     /**
      * A path match to use.
      *
@@ -41,6 +37,15 @@ type Config = Readonly<{
      * Force the use of a StaticRouter, instead of MemoryRouter.
      */
     forceStatic: true;
+    /**
+     * If true, then we will not use a CompatRouter.
+     *
+     * NOTE(john): There are cases where we don't want a CompatRouter
+     * here as it uses useLayoutEffect, which causes issues in our
+     * test environment. Namely, that it generates a warning about
+     * the use of useLayoutEffect, which causes an error.
+     */
+    disableCompatRouter?: boolean;
     /**
      * A path match to use.
      *

package/dist/harness/test-harness.d.ts

@@ -19,11 +19,11 @@ export declare const testHarness: <TProps extends object>(Component: import("rea
     readonly router: import("./types").TestHarnessAdapter<string | Readonly<{
         initialEntries: import("history").LocationDescriptor<unknown>[] | undefined;
         initialIndex?: number | undefined;
-        getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined;
         path?: string;
     } | {
         location: import("history").LocationDescriptor;
         forceStatic: true;
+        disableCompatRouter?: boolean;
         path?: string;
     } | {
         location: import("history").LocationDescriptor;

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var addonActions = require('@storybook/addon-actions');
 var reactRouterDom = require('react-router-dom');
+var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
 var _extends = require('@babel/runtime/helpers/extends');
 var ReactDOMServer = require('react-dom/server');
 
@@ -333,19 +334,21 @@ const MaybeWithRoute = ({
   path,
   configLocation
 }) => {
-  const actualLocation = reactRouterDom.useLocation();
-  const configuredLocation = typeof configLocation === "string" ? configLocation : configLocation.pathname;
   if (path == null) {
     return React__namespace.createElement(React__namespace.Fragment, null, children);
   }
+  const ErrorElement = () => {
+    const actualLocation = reactRouterDomV5Compat.useLocation();
+    const configuredLocation = typeof configLocation === "string" ? configLocation : configLocation.pathname;
+    const errorMessage = `The current location '${actualLocation.pathname}' ` + `does not match the configured path '${path}'. ` + `Did you provide the correct configured ` + `location, '${configuredLocation}', or did the ` + `routing lead to a different place than you ` + `expected?`;
+    throw new Error(errorMessage);
+  };
   return React__namespace.createElement(reactRouterDom.Switch, null, React__namespace.createElement(reactRouterDom.Route, {
-    exact: true,
-    path: path
-  }, children), React__namespace.createElement(reactRouterDom.Route, {
+    path: path,
+    render: () => React__namespace.createElement(React__namespace.Fragment, null, children)
+  }), React__namespace.createElement(reactRouterDom.Route, {
     path: "*",
-    render: () => {
-      throw new Error(`The current location '${actualLocation.pathname}' ` + `does not match the configured path '${path}'. ` + `Did you provide the correct configured ` + `location, '${configuredLocation}', or did the ` + `routing lead to a different place than you ` + `expected?`);
-    }
+    component: ErrorElement
   }));
 };
 const adapter = (children, config) => {
@@ -356,21 +359,30 @@ const adapter = (children, config) => {
     };
   }
   if ("forceStatic" in config && config.forceStatic) {
+    if (config.disableCompatRouter) {
+      return React__namespace.createElement(reactRouterDom.StaticRouter, {
+        location: config.location,
+        context: {}
+      }, React__namespace.createElement(MaybeWithRoute, {
+        path: config.path,
+        configLocation: config.location
+      }, children));
+    }
     return React__namespace.createElement(reactRouterDom.StaticRouter, {
       location: config.location,
       context: {}
-    }, React__namespace.createElement(MaybeWithRoute, {
+    }, React__namespace.createElement(reactRouterDomV5Compat.CompatRouter, null, React__namespace.createElement(MaybeWithRoute, {
       path: config.path,
       configLocation: config.location
-    }, children));
+    }, children)));
   }
   if ("location" in config && config.location !== undefined) {
     return React__namespace.createElement(reactRouterDom.MemoryRouter, {
       initialEntries: [config.location]
-    }, React__namespace.createElement(MaybeWithRoute, {
+    }, React__namespace.createElement(reactRouterDomV5Compat.CompatRouter, null, React__namespace.createElement(MaybeWithRoute, {
       path: config.path,
       configLocation: config.location
-    }, children));
+    }, children)));
   }
   if (!("initialEntries" in config) || config.initialEntries === undefined) {
     throw new Error("A location or initial history entries must be provided.");
@@ -382,13 +394,10 @@ const adapter = (children, config) => {
   if (config.initialIndex != null) {
     routerProps.initialIndex = config.initialIndex;
   }
-  if (config.getUserConfirmation != null) {
-    routerProps.getUserConfirmation = config.getUserConfirmation;
-  }
-  return React__namespace.createElement(reactRouterDom.MemoryRouter, routerProps, React__namespace.createElement(MaybeWithRoute, {
+  return React__namespace.createElement(reactRouterDom.MemoryRouter, routerProps, React__namespace.createElement(reactRouterDomV5Compat.CompatRouter, null, React__namespace.createElement(MaybeWithRoute, {
     path: config.path,
     configLocation: entries[(_config$initialIndex = config.initialIndex) != null ? _config$initialIndex : 0]
-  }, children));
+  }, children)));
 };
 
 const DefaultAdapters = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-testing-core",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,8 @@
     "node-fetch": "^2.6.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "5.3.4"
+    "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "^6.30.0"
   },
   "devDependencies": {
     "@khanacademy/wonder-stuff-testing": "^3.0.1",