@khanacademy/wonder-blocks-testing 2.0.8 → 4.0.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 14);
+/******/ 	return __webpack_require__(__webpack_require__.s = 18);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -121,89 +121,114 @@ const getConfiguration = () => {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RespondWith; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return makeGqlMockResponse; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return makeMockResponse; });
+/* harmony import */ var _response_impl_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15);
+
+
+/**
+ * Helper for creating a text-based mock response.
+ */
+const textResponse = (text, statusCode = 200) => ({
+  type: "text",
+  text,
+  statusCode
+});
+/**
+ * Helper for creating a rejected mock response.
+ */
+
+
+const rejectResponse = error => ({
+  type: "reject",
+  error
+});
 /**
- * Helpers to define rejection states for mocking GQL requests.
+ * Helpers to define mock responses for mocked requests.
  */
+
+
 const RespondWith = Object.freeze({
-  data: data => ({
-    type: "data",
+  /**
+   * Response with text body and status code.
+   * Status code defaults to 200.
+   */
+  text: (text, statusCode = 200) => textResponse(text, statusCode),
+
+  /**
+   * Response with JSON body and status code 200.
+   */
+  json: json => textResponse(() => JSON.stringify(json)),
+
+  /**
+   * Response with GraphQL data JSON body and status code 200.
+   */
+  graphQLData: data => textResponse(() => JSON.stringify({
     data
+  })),
+
+  /**
+   * Response with body that will not parse as JSON and status code 200.
+   */
+  unparseableBody: () => textResponse("INVALID JSON"),
+
+  /**
+   * Rejects with an AbortError to simulate an aborted request.
+   */
+  abortedRequest: () => rejectResponse(() => {
+    const abortError = new Error("Mock request aborted");
+    abortError.name = "AbortError";
+    return abortError;
   }),
-  unparseableBody: () => ({
-    type: "parse"
-  }),
-  abortedRequest: () => ({
-    type: "abort"
-  }),
+
+  /**
+   * Rejects with the given error.
+   */
+  reject: error => rejectResponse(error),
+
+  /**
+   * A non-200 status code with empty text body.
+   * Equivalent to calling `ResponseWith.text("", statusCode)`.
+   */
   errorStatusCode: statusCode => {
     if (statusCode < 300) {
       throw new Error(`${statusCode} is not a valid error status code`);
     }
 
-    return {
-      type: "status",
-      statusCode
-    };
+    return textResponse("{}", statusCode);
   },
-  nonGraphQLBody: () => ({
-    type: "invalid"
-  }),
-  graphQLErrors: errorMessages => ({
-    type: "graphql",
-    errors: errorMessages
-  })
+
+  /**
+   * Response body that is valid JSON but not a valid GraphQL response.
+   */
+  nonGraphQLBody: () => textResponse(() => JSON.stringify({
+    valid: "json",
+    that: "is not a valid graphql response"
+  })),
+
+  /**
+   * Response that is a GraphQL errors response with status code 200.
+   */
+  graphQLErrors: errorMessages => textResponse(() => JSON.stringify({
+    errors: errorMessages.map(e => ({
+      message: e
+    }))
+  }))
 });
 /**
- * Turns an ErrorResponse value in an actual Response that will invoke
- * that error.
+ * Turns a MockResponse value to an actual Response that represents the mock.
  */
 
-const makeGqlMockResponse = response => {
+const makeMockResponse = response => {
   switch (response.type) {
-    case "data":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve(JSON.stringify({
-          data: response.data
-        }))
-      });
-
-    case "parse":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve("INVALID JSON")
-      });
-
-    case "abort":
-      const abortError = new Error("Mock request aborted");
-      abortError.name = "AbortError";
-      return Promise.reject(abortError);
-
-    case "status":
-      return Promise.resolve({
-        status: response.statusCode,
-        text: () => Promise.resolve(JSON.stringify({}))
-      });
-
-    case "invalid":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve(JSON.stringify({
-          valid: "json",
-          that: "is not a valid graphql response"
-        }))
-      });
-
-    case "graphql":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve(JSON.stringify({
-          errors: response.errors.map(e => ({
-            message: e
-          }))
-        }))
-      });
+    case "text":
+      const text = typeof response.text === "function" ? response.text() : response.text;
+      return Promise.resolve(new _response_impl_js__WEBPACK_IMPORTED_MODULE_0__[/* ResponseImpl */ "a"](text, {
+        status: response.statusCode
+      }));
+
+    case "reject":
+      const error = response.error instanceof Error ? response.error : response.error();
+      return Promise.reject(error);
 
     default:
       throw new Error(`Unknown response type: ${response.type}`);
@@ -220,24 +245,82 @@ module.exports = require("react");
 /* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return mockRequester; });
+/* harmony import */ var _make_mock_response_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+
+/**
+ * A generic mock request function for using when mocking fetch or gqlFetch.
+ */
+const mockRequester = (operationMatcher, operationToString) => {
+  // We want this to work in jest and in fixtures to make life easy for folks.
+  // This is the array of mocked operations that we will traverse and
+  // manipulate.
+  const mocks = []; // What we return has to be a drop in for the fetch function that is
+  // provided to `GqlRouter` which is how folks will then use this mock.
+
+  const mockFn = (...args) => {
+    // Iterate our mocked operations and find the first one that matches.
+    for (const mock of mocks) {
+      if (mock.onceOnly && mock.used) {
+        // This is a once-only mock and it has been used, so skip it.
+        continue;
+      }
+
+      if (operationMatcher.apply(void 0, [mock.operation].concat(args))) {
+        mock.used = true;
+        return mock.response();
+      }
+    } // Default is to reject with some helpful info on what request
+    // we rejected.
+
+
+    return Promise.reject(new Error(`No matching mock response found for request:
+    ${operationToString.apply(void 0, args)}`));
+  };
+
+  const addMockedOperation = (operation, response, onceOnly) => {
+    const mockResponse = () => Object(_make_mock_response_js__WEBPACK_IMPORTED_MODULE_0__[/* makeMockResponse */ "b"])(response);
+
+    mocks.push({
+      operation,
+      response: mockResponse,
+      onceOnly,
+      used: false
+    });
+    return mockFn;
+  };
+
+  mockFn.mockOperation = (operation, response) => addMockedOperation(operation, response, false);
+
+  mockFn.mockOperationOnce = (operation, response) => addMockedOperation(operation, response, true);
+
+  return mockFn;
+};
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _storybook_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var _storybook_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "storybook", function() { return _storybook_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
 
 
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getAdapter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+/* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 /* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _adapter_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
+/* harmony import */ var _adapter_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 
 
 
@@ -247,7 +330,10 @@ __webpack_require__.r(__webpack_exports__);
  */
 const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORTED_MODULE_2__[/* Adapter */ "a"]("storybook", ({
   title,
-  description: groupDescription
+  description: groupDescription,
+  // We don't use the default title in Storybook as storybook
+  // will generate titles for us if we pass a nullish title.
+  getDefaultTitle: _
 }, adapterOptions, declaredFixtures) => {
   const templateMap = new WeakMap();
 
@@ -310,7 +396,7 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
 });
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -318,11 +404,43 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _setup_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var _combine_options_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
-
-
+/* harmony import */ var _combine_options_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
+
+
+
+
+const normalizeOptions = componentOrOptions => {
+  // To differentiate between a React component and a FixturesOptions object,
+  // we have to do some type checking.
+  //
+  // Alternatives I considered were:
+  // - Use an additional parameter for the options and then do an arg number
+  //   check, but that always makes typing a function harder and often breaks
+  //   types. I didn't want that battle today.
+  // - Use a tuple when providing component and options with the first element
+  //   being the component and the second being the options. However that
+  //   feels like an obscure API even though it's really easy to do the
+  //   typing.
+  if ( // Most React components, whether functional or class-based, are
+  // inherently functions in JavaScript, so a check for functions is
+  // usually sufficient.
+  typeof componentOrOptions === "function" || // However, the return of React.forwardRef is not a function,
+  // so we also have to cope with that.
+  // A forwardRef has $$typeof = Symbol(react.forward_ref) and a
+  // render function.
+  // $FlowIgnore[prop-missing]
+  typeof componentOrOptions.render === "function") {
+    return {
+      // $FlowIgnore[incompatible-return]
+      component: componentOrOptions
+    };
+  } // We can't test for React.ComponentType at runtime.
+  // Let's assume our simple heuristic above is sufficient.
+  // $FlowIgnore[incompatible-return]
 
 
+  return componentOrOptions;
+};
 /**
  * Describe a group of fixtures for a given component.
  *
@@ -341,7 +459,9 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
  * storybook, the popular framework, uses both default and named exports for
  * its interface.
  */
-const fixtures = (options, fn) => {
+
+
+const fixtures = (componentOrOptions, fn) => {
   var _additionalAdapterOpt;
 
   const {
@@ -354,11 +474,12 @@ const fixtures = (options, fn) => {
     description: groupDescription,
     defaultWrapper,
     additionalAdapterOptions
-  } = options; // 1. Create a new adapter group.
+  } = normalizeOptions(componentOrOptions); // 1. Create a new adapter group.
 
   const group = adapter.declareGroup({
-    title: title || component.displayName || component.name || "Component",
-    description: groupDescription
+    title,
+    description: groupDescription,
+    getDefaultTitle: () => component.displayName || component.name || "Component"
   }); // 2. Invoke fn with a function that can add a new fixture.
 
   const addFixture = (description, props, wrapper = null) => {
@@ -381,80 +502,53 @@ const fixtures = (options, fn) => {
 };
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return mockGqlFetch; });
-/* harmony import */ var _gql_request_matches_mock_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
-/* harmony import */ var _make_gql_mock_response_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return mockFetch; });
+/* harmony import */ var _fetch_request_matches_mock_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16);
+/* harmony import */ var _mock_requester_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 
 
 
 /**
  * A mock for the fetch function passed to GqlRouter.
  */
-const mockGqlFetch = () => {
-  // We want this to work in jest and in fixtures to make life easy for folks.
-  // This is the array of mocked operations that we will traverse and
-  // manipulate.
-  const mocks = []; // What we return has to be a drop in for the fetch function that is
-  // provided to `GqlRouter` which is how folks will then use this mock.
-
-  const gqlFetchMock = (operation, variables, context) => {
-    // Iterate our mocked operations and find the first one that matches.
-    for (const mock of mocks) {
-      if (mock.onceOnly && mock.used) {
-        // This is a once-only mock and it has been used, so skip it.
-        continue;
-      }
+const mockFetch = () => Object(_mock_requester_js__WEBPACK_IMPORTED_MODULE_1__[/* mockRequester */ "a"])(_fetch_request_matches_mock_js__WEBPACK_IMPORTED_MODULE_0__[/* fetchRequestMatchesMock */ "a"], (input, init) => `Input: ${typeof input === "string" ? input : JSON.stringify(input, null, 2)}
+    Options: ${init == null ? "None" : JSON.stringify(init, null, 2)}`);
 
-      if (Object(_gql_request_matches_mock_js__WEBPACK_IMPORTED_MODULE_0__[/* gqlRequestMatchesMock */ "a"])(mock.operation, operation, variables, context)) {
-        mock.used = true;
-        return mock.response();
-      }
-    } // Default is to reject with some helpful info on what request
-    // we rejected.
-
-
-    return Promise.reject(new Error(`No matching GraphQL mock response found for request:
-    Operation: ${operation.type} ${operation.id}
-    Variables: ${variables == null ? "None" : JSON.stringify(variables, null, 2)}
-    Context: ${JSON.stringify(context, null, 2)}`));
-  };
-
-  const addMockedOperation = (operation, response, onceOnly) => {
-    const mockResponse = () => Object(_make_gql_mock_response_js__WEBPACK_IMPORTED_MODULE_1__[/* makeGqlMockResponse */ "b"])(response);
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-    mocks.push({
-      operation,
-      response: mockResponse,
-      onceOnly,
-      used: false
-    });
-    return gqlFetchMock;
-  };
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return mockGqlFetch; });
+/* harmony import */ var _gql_request_matches_mock_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(17);
+/* harmony import */ var _mock_requester_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 
-  gqlFetchMock.mockOperation = (operation, response) => addMockedOperation(operation, response, false);
 
-  gqlFetchMock.mockOperationOnce = (operation, response) => addMockedOperation(operation, response, true);
 
-  return gqlFetchMock;
-};
+/**
+ * A mock for the fetch function passed to GqlRouter.
+ */
+const mockGqlFetch = () => Object(_mock_requester_js__WEBPACK_IMPORTED_MODULE_1__[/* mockRequester */ "a"])(_gql_request_matches_mock_js__WEBPACK_IMPORTED_MODULE_0__[/* gqlRequestMatchesMock */ "a"], (operation, variables, context) => `Operation: ${operation.type} ${operation.id}
+    Variables: ${variables == null ? "None" : JSON.stringify(variables, null, 2)}
+    Context: ${JSON.stringify(context, null, 2)}`);
 
 /***/ }),
-/* 7 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = require("@storybook/addon-actions");
 
 /***/ }),
-/* 8 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Adapter; });
-/* harmony import */ var _adapter_group_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony import */ var _adapter_group_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
 
 
 /**
@@ -509,7 +603,7 @@ class Adapter {
 }
 
 /***/ }),
-/* 9 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -574,12 +668,12 @@ class AdapterGroup {
 }
 
 /***/ }),
-/* 10 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return combineOptions; });
-/* harmony import */ var _combine_top_level_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
+/* harmony import */ var _combine_top_level_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
 
 /**
  * Combine one or more objects into a single object.
@@ -604,12 +698,12 @@ const combineOptions = (...toBeCombined) => {
 };
 
 /***/ }),
-/* 11 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return combineTopLevel; });
-/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
+/* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(14);
 /* harmony import */ var _khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_stuff_core__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -650,13 +744,69 @@ const combineTopLevel = (val1, val2) => {
 };
 
 /***/ }),
-/* 12 */
+/* 14 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-stuff-core");
 
 /***/ }),
-/* 13 */
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponseImpl; });
+// We need a version of Response. When we're in Jest JSDOM environment or a
+// version of Node that supports the fetch API (17 and up, possibly with
+// --experimental-fetch flag), then we're good, but otherwise we need an
+// implementation, so this uses node-fetch as a peer dependency and uses that
+// to provide the implementation if we don't already have one.
+const ResponseImpl = typeof Response === "undefined" ? __webpack_require__(19).Response : Response;
+
+/***/ }),
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return fetchRequestMatchesMock; });
+/**
+ * Get the URL from the given RequestInfo.
+ *
+ * Since we could be running in Node or in JSDOM, we don't check instance
+ * types, but just use a heuristic so that this works without knowing what
+ * was polyfilling things.
+ */
+const getHref = input => {
+  if (typeof input === "string") {
+    return input;
+  } else if (typeof input.url === "string") {
+    return input.url;
+  } else if (typeof input.href === "string") {
+    return input.href;
+  } else {
+    throw new Error(`Unsupported input type`);
+  }
+};
+/**
+ * Determines if a given fetch invocation matches the given mock.
+ */
+
+
+const fetchRequestMatchesMock = (mock, input, init) => {
+  // Currently, we only match on the input portion.
+  // This can be a Request, a URL, or a string.
+  const href = getHref(input); // Our mock operation is either a string for an exact match, or a regex.
+
+  if (typeof mock === "string") {
+    return href === mock;
+  } else if (mock instanceof RegExp) {
+    return mock.test(href);
+  } else {
+    throw new Error(`Unsupported mock operation: ${JSON.stringify(mock)}`);
+  }
+};
+
+/***/ }),
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -731,33 +881,42 @@ const gqlRequestMatchesMock = (mock, operation, variables, context) => {
 };
 
 /***/ }),
-/* 14 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _fixtures_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _fixtures_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony reexport (module object) */ __webpack_require__.d(__webpack_exports__, "adapters", function() { return _fixtures_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_0__; });
-/* harmony import */ var _fixtures_fixtures_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _fixtures_fixtures_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "fixtures", function() { return _fixtures_fixtures_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
 /* harmony import */ var _fixtures_setup_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "setupFixtures", function() { return _fixtures_setup_js__WEBPACK_IMPORTED_MODULE_2__["b"]; });
 
-/* harmony import */ var _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mockGqlFetch", function() { return _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
+/* harmony import */ var _make_mock_response_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RespondWith", function() { return _make_mock_response_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
+
+/* harmony import */ var _fetch_mock_fetch_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mockFetch", function() { return _fetch_mock_fetch_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _gql_make_gql_mock_response_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RespondWith", function() { return _gql_make_gql_mock_response_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
+/* harmony import */ var _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mockGqlFetch", function() { return _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
 // Fixtures framework
 
 
 
 
-// GraphQL framework
 
 
 
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports) {
+
+module.exports = require("node-fetch");
+
 /***/ })
 /******/ ]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "2.0.8",
+    "version": "4.0.0",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -20,6 +20,7 @@
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "@khanacademy/wonder-stuff-testing": "^0.0.2",
         "@storybook/addon-actions": "^6.4.8",
+        "node-fetch": "^2.6.7",
         "react": "16.14.0"
     },
     "devDependencies": {