@khanacademy/wonder-blocks-testing 4.0.4 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "4.0.4",
+    "version": "5.0.2",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -14,14 +14,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.16.3",
-        "@khanacademy/wonder-blocks-data": "^8.0.2"
+        "@khanacademy/wonder-blocks-data": "^8.0.3"
     },
     "peerDependencies": {
         "@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"
+        "aphrodite": "^1.2.5",
+        "react": "16.14.0",
+        "react-router-dom": "5.3.0"
     },
     "devDependencies": {
         "wb-dev-build-settings": "^0.4.0"

package/src/__docs__/_overview_.stories.mdx

@@ -13,7 +13,6 @@ import {Meta} from "@storybook/addon-docs";
 
 Wonder Blocks Testing provides various utilities to support testing of React components and Wonder Blocks features.
 
- * [Fixtures Framework](/docs/testing-fixtures-basic--f-1)
- * Testing Wonder Blocks Data GraphQL
-   * [`mockGqlFetch`](/docs/testing-exports-mockgqlfetch--page)
-   * [`RespondWith`](/docs/testing-exports-respondwith--page)
+ * [Fixtures](/docs/testing-fixtures-overview--page)
+ * [Mocking](/docs/testing-mocking-overview--page)
+ * [Test Harness](/docs/testing-test-harness-overview--page)

package/src/__docs__/_overview_fixtures.stories.mdx

@@ -0,0 +1,22 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Fixtures / Overview"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# Fixtures
+
+The fixtures framework provides an agnostic way to declare component fixtures that can then be adapted via runtime configuration to the fixture rendering environment of choice.
+
+To use the framework for defining fixtures, import the [`fixtures()`](/docs/testing-fixtures-exports-fixtures--page) method. You can configure the framework for your specific environment (such as Storybook) using the [`setupFixtures()`](/docs/testing-fixtures-exports-setupfixtures--page) method.
+
+An adapter to output fixtures for [Storybook](/docs/testing-fixtures-exports-fixtureadapters--page) is included.
+
+Some examples of this framework in use with Storybook can be seen [here](/docs/testing-fixtures-basic--f-1).
+
+Types are also exported to enable the creation of adapters for other environments as you may need.

package/src/__docs__/_overview_mocking.stories.mdx

@@ -0,0 +1,14 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Mocking / Overview"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# Mocking
+
+Wonder Blocks Testing provides support for mocking the Wonder Blocks Data GraphQL fetching via the [`mockGqlFetch()`](/docs/testing-mocking-exports-mockgqlfetch--page) export, and `fetch()`-like methods via the [`mockFetch()`](/docs/testing-mocking-exports-mockFetch--page) export. These are both supported by the [`RespondWith`](/docs/testing-mocking-exports-respondwith--page) API for easily generating the responses.

package/src/__docs__/_overview_test_harness.stories.mdx

@@ -0,0 +1,18 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Test Harness / Overview"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# Test Harness
+
+The test harness framework provides a simple approach to minimizing boilerplate when testing React components. It works by allowing for the definition of predefined adapters and configurations that can be rendered around the component under test, encapsulating boilerplate code such as setting up contexts, CSS, or mocking APIs.
+
+There are some [default adapters](/docs/testing-test-harness-exports-harnessadapters--page) provided as well as default [`testHarness()`](/docs/testing-test-harness-exports-testharness--page) and [`hookHarness()`](/docs/testing-test-harness-exports-hookharness--page) methods that use these adapters with meaningful defaults, which can be overridden.
+
+However, it is likely you will want to replace or augment the existing adapters with some of your own. For this purpose, the [`makeTestHarness()`](/docs/testing-test-harness-exports-maketestharness--page) and [`makeHookHarness()`](/docs/testing-test-harness-exports-makehookharness--page) methods are provided.

package/src/__docs__/exports.fixture-adapters.stories.mdx

@@ -0,0 +1,49 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Fixtures / Exports / fixtureAdapters"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# fixtureAdapters
+
+```ts
+type StoryContext = {|
+    args: $ReadOnly<any>,
+    argTypes: $ReadOnly<any>,
+    globals: $ReadOnlyArray<any>,
+    hooks: $ReadOnlyArray<any>,
+    parameters: $ReadOnly<any>,
+    viewMode: mixed,
+|};
+
+type StorybookOptions = {|
+    decorators?: Array<
+        (story: React.ComponentType<any>, context: StoryContext) => React.Node,
+    >,
+    parameters?: $ReadOnly<any>,
+|};
+
+type DefaultExport = {|
+    title?: ?string,
+    ...StorybookOptions,
+|};
+
+type Exports<TProps: {...}> = {|
+    default: DefaultExport,
+    [story: string]: React.ComponentType<TProps>,
+|};
+
+
+const fixtureAdapters = {
+    storybook: AdapterFactory<StorybookOptions, Exports<any>>,
+}
+```
+
+These are the adapters available for use with the fixtures framework. If an adapter is not listed here for the framework you want, you can create your own conforming to the [`FixturesAdapterFactory`](/docs/testing-fixtures-types-fixturesadapterfactory--page) type.
+
+To configure the fixtures framework, use an adapter with the [`setupFixtures`](/docs/testing-fixtures-exports-setupfixtures--page) function.

package/src/__docs__/exports.fixtures.stories.mdx

@@ -0,0 +1,53 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Fixtures / Exports / fixtures()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# fixtures()
+
+```ts
+type FixtureProps<TProps: {...}> =
+    | $ReadOnly<TProps>
+    | ((options: $ReadOnly<GetPropsOptions>) => $ReadOnly<TProps>);
+
+fixtures<TProps: {...}>(
+    component: React.ComponentType<TProps>,
+    fn: (
+        fixture: (
+            description: string,
+            props: FixtureProps<TProps>,
+            wrapper?: React.ComponentType<TProps>,
+        ) => void,
+    ) => void,
+): ?$ReadOnly<mixed>;
+
+
+fixtures<TProps: {...}>(
+    options: $ReadOnly<FixturesOptions<TProps>>,
+    fn: (
+        fixture: (
+            description: string,
+            props: FixtureProps<TProps>,
+            wrapper?: React.ComponentType<TProps>,
+        ) => void,
+    ) => void,
+): ?$ReadOnly<mixed>;
+```
+
+The `fixtures()` method is used to define a set of fixtures for a component. It provides a way to describe fixtures as one might describe unit tests. Fixtures are like stories in Storybook (and, if the fixtures framework is configured for storybook, will be stories).
+
+The return value provides the module exports that your fixture file should export. If your build system supports CommonJS syntax, this can be exported using `module.exports = returnValue`; however, if you need to use ESM syntax, you may need to do something like we do in [our Fixtures Framework example stories](/docs/testing-fixtures-basic--f-1).
+
+There are two ways to call the `fixtures()` function; with a component and callback, or with a set of [options](/docs/testing-fixtures-types-fixtureoptions--page) and callback.
+
+The second argument is a callback in which you should define your fixture susing the passed `fixture` function (the first and only argument of the callback). The `fixture` function takes two or three arguments:
+
+- `description: string`: A string describing the fixture. This should be used to explain what the fixture is expected to show.
+- `props: FixtureProps<TProps>`: The props that the fixture should be rendered with. This can be either a plain object, or a function that returns a plain object. The function will be called with an API to assist in generating the props (see [`GetPropsOptions`](/docs/testing-fixtures-types-getpropsoptions--page)).
+- `wrapper?: React.ComponentType<TProps>`: An optional component that will be rendered around the fixture. This can be used to wrap the fixture in a component that adds additional functionality, such as a test harness (see [`makeTestHarness`](/docs/testing-test-harness-exports-maketestharness--page)).

package/src/__docs__/exports.harness-adapters.stories.mdx

@@ -0,0 +1,187 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Test Harness / Exports / harnessAdapters"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# harnessAdapters
+
+```ts
+/**
+ * The default adapters provided by Wonder Blocks.
+ */
+const DefaultAdapters = {
+    css: css.adapter,
+    data: data.adapter,
+    portal: portal.adapter,
+    router: router.adapter,
+};
+
+/**
+ * The default configurations to use with the `DefaultAdapters`.
+ */
+const DefaultConfigs: Configs<typeof DefaultAdapters> = {
+    css: css.defaultConfig,
+    data: data.defaultConfig,
+    portal: portal.defaultConfig,
+    router: router.defaultConfig,
+};
+```
+
+These are the adapters available for use with the test harness framework and their default configurations. The [`testHarness()`](/docs/testing-test-harness-exports-testharness--page) and [`hookHarness()`](/docs/testing-test-harness-exports-hookharness--page) methods are constructed using these.
+
+If you want to make your own test harness or hook harness using some of these defaults and some of your own, you can combine them into your call to [`makeTestHarness()`](/docs/testing-test-harness-exports-maketestharness--page) or [`makeHookHarness()`](/docs/testing-test-harness-exports-makehookharness--page).
+
+There are four build-in adapters:
+- [`css`](#css)
+- [`data`](#data)
+- [`portal`](#portal)
+- [`router`](#router)
+
+## css
+
+The `css` adapter can be used to apply CSS classes and adhoc styles around the harnessed component.
+
+```ts
+type Config =
+    | string
+    | Array<string>
+    | CSSProperties
+    | {|
+          classes: Array<string>,
+          style: CSSProperties,
+      |};
+```
+
+The configuration for this adapter can be a class name, an array of class names, an Aphrodite-compatible CSS style object, or an object definining both an array of `classes` and a `style` object.
+
+The default configuration for this adapter is for it to not be used.
+
+## data
+
+The `data` adapter provides a convenient way to intercept Wonder Blocks Data requests. It renders one [`InterceptRequests`](/docs/data-exports-interceptrequests--page) component per configured interceptor.
+
+```ts
+type Interceptor = React.ElementConfig<typeof InterceptRequests>["interceptor"];
+
+type Config = Interceptor | Array<Interceptor>;
+```
+
+The configuration is one or more interceptors, as defined by the `interceptor` prop of the [`InterceptRequests`](/docs/data-exports-interceptrequests--page) component, which is effectively.
+
+The default configuration for this adapter is for there to be no interceptors.
+
+## portal
+
+The `portal` adapter ensures there is a mounting point in the DOM for components that rely on rendering with a React portal.
+
+```ts
+type Config = string;
+```
+
+The configuration is just a string providing the identifier to give the added element. The adapter will then render alongside the harnessed component, an empty `div` element with both the `id` and `data-test-id` attributes set to the configuration value.
+
+The default configuration for this adapter is for it to not be used.
+
+## router
+
+The `router` adapter is useful for testing components that use React Router. It will render either a `MemoryRouter` or `StaticRouter`, depending on configuration. It may also optionally render a `Route` with suitable `path` match, depending on the configuration.
+
+```ts
+type Config =
+    | $ReadOnly<
+          | {|
+                /**
+                 * See MemoryRouter prop for initialEntries.
+                 */
+                initialEntries: MemoryRouterProps["initialEntries"],
+
+                /**
+                 * See MemoryRouter prop for initialIndex.
+                 */
+                initialIndex?: MemoryRouterProps["initialIndex"],
+
+                /**
+                 * See MemoryRouter prop for getUserConfirmation.
+                 */
+                getUserConfirmation?: MemoryRouterProps["getUserConfirmation"],
+
+                /**
+                 * A path match to use.
+                 *
+                 * When this is specified, the harnessed component will be
+                 * rendered inside a `Route` handler with this path.
+                 *
+                 * If the path matches the location, then the route will
+                 * render the component.
+                 *
+                 * If the path does not match the location, then the route
+                 * will not render the component.
+                 */
+                path?: string,
+            |}
+          | {|
+                /**
+                 * The location to use.
+                 */
+                location: string | Location,
+
+                /**
+                 * Force the use of a StaticRouter, instead of MemoryRouter.
+                 */
+                forceStatic: true,
+
+                /**
+                 * A path match to use.
+                 *
+                 * When this is specified, the harnessed component will be
+                 * rendered inside a `Route` handler with this path.
+                 *
+                 * If the path matches the location, then the route will
+                 * render the component.
+                 *
+                 * If the path does not match the location, then the route
+                 * will not render the component.
+                 */
+                path?: string,
+            |}
+          | {|
+                /**
+                 * The initial location to use.
+                 */
+                location: string | LocationShape,
+
+                /**
+                 * A path match to use.
+                 *
+                 * When this is specified, the harnessed component will be
+                 * rendered inside a `Route` handler with this path.
+                 *
+                 * If the path matches the location, then the route will
+                 * render the component.
+                 *
+                 * If the path does not match the location, then the route
+                 * will not render the component.
+                 */
+                path?: string,
+            |},
+      >
+    // The initial location to use.
+    | string;
+```
+
+There are four distinct shapes to the configuration:
+
+1. An object with `initialEntries` array (see `MemoryRouter` props), optional `initialIndex` and `getUserConfirmation` (see `MemoryRouter` props), and an optional `path` parameter if route matching is required.
+1. An object with `forceStatic` set to true, the location as a `string` or `Location` object, with an optional `path` parameter if route matching is required.
+1. An object specifying the location as a `string` or a `LocationShape` object, with an optional `path` parameter if route matching is required.
+1. A `string` specifying the location to use
+
+The first of these provides the most flexibility, basically supporting full configuration of a `MemoryRouter`, which supports history and navigation. The second configuration type is for scenarios where we absolutely do not want navigation, such as server-side rendering scenarios; it forces the use of a `StaticRouter` instance. The third type is for when you just need to render a single location with a matched route path. The fourth and final type allows you to just provide the location as a string.
+
+By default, the router adapter is configured with `{location: "/"}`.

package/src/__docs__/exports.hook-harness.stories.mdx

@@ -0,0 +1,22 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Test Harness / Exports / hookHarness()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# hookHarness()
+
+```ts
+hookHarness(
+    configs?: $Shape<TestHarnessConfigs<typeof DefaultAdapters>>,
+): React.AbstractComponent<any, any>;
+```
+
+This method can be used to create a test harness for use with the `wrapper` option of calls like `renderHook()` from `@testing-library/react-hooks` when writing tests for React hooks.
+
+This method is created by using [`makeHookHarness`](/docs/testing-test-harness-exports-makehookharness--page) with [`harnessAdapters.DefaultAdapters` and `harnessAdapters.DefaultConfigs`](/docs/testing-test-harness-exports-harnessadapters--page).

package/src/__docs__/exports.make-hook-harness.stories.mdx

@@ -0,0 +1,25 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Test Harness / Exports / makeHookHarness()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# makeHookHarness()
+
+```ts
+makeHookHarness<TAdapters: TestHarnessAdapters>(
+    adapters: TAdapters,
+    defaultConfigs: TestHarnessConfigs<TAdapters>,
+): ((
+    configs?: $Shape<TestHarnessConfigs<TAdapters>>,
+) => React.AbstractComponent<any, any>);
+```
+
+This method takes a set of adapters (such as [`harnessAdapters.DefaultAdapters`](/docs/testing-test-harness-exports-harnessadapters--page)) and a set of default configurations for those adapters (such as [`harnessAdapters.DefaultConfigs`](/docs/testing-test-harness-exports-harnessadapters--page)), and returns a function that can be called to create a component that applys those adapters with those default configs, or overrides to those configs.
+
+This returned method can then be used for the `wrapper` option of calls like `renderHook()` from `@testing-library/react-hooks` when writing tests for React hooks.

package/src/__docs__/exports.make-test-harness.stories.mdx

@@ -0,0 +1,28 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Test Harness / Exports / makeTestHarness()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# makeTestHarness()
+
+```ts
+makeTestHarness<TAdapters: TestHarnessAdapters>(
+    adapters: TAdapters,
+    defaultConfigs: TestHarnessConfigs<TAdapters>,
+): (<-TProps, +Instance = mixed>(
+    Component: React.AbstractComponent<TProps, Instance>,
+    configs?: $Shape<TestHarnessConfigs<TAdapters>>,
+) => React.AbstractComponent<TProps, Instance>);
+```
+
+This method takes a set of adapters (such as [`harnessAdapters.DefaultAdapters`](/docs/testing-test-harness-exports-harnessadapters--page)) and a set of default configurations for those adapters (such as [`harnessAdapters.DefaultConfigs`](/docs/testing-test-harness-exports-harnessadapters--page)), and returns a function that can be called to create a component that applys those adapters with those default configs, or overrides to those configs, around another component.
+
+The returned method will ensure refs are forwarded to the harnessed component, and the component the method returns will have the same props as the component it is harnessing.
+
+The harnessed component can be used in unit tests, such as in Jest, to reduce boilerplate needed to setup the test case. It can also be used as a a wrapper component when defining a fixture for a component in the Wonder Blocks Testing [Fixtures framework](/docs/testing-fixtures-overview--page).

package/src/__docs__/exports.mock-fetch.stories.mdx

@@ -0,0 +1,40 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Mocking / Exports / mockFetch()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# mockFetch()
+
+```ts
+mockFetch(): FetchMockFn;
+```
+
+The `mockFetch` function provides an API to easily mock `fetch()` responses. It follows the similar patterns of `jest.fn()` and jest mocks whereby the returned value is both a proxy for the fetch function as well as an API for modifying the behavior of that function.
+
+# API
+
+Besides being a function that fits the `fetch()` signature, the return value of `mockFetch()` has an API to customize the behavior of that function. Used in conjunction with the [`RespondWith`](/docs/testing-mocking-exports-respondwith--page) API, this can create a variety of responses for tests and stories.
+
+| Function | Purpose |
+| -------- | ------- |
+| `mockOperation` | When called, any request that matches the defined mock will respond with the given response. |
+| `mockOperationOnce` | When called, the first request that matches the defined mock will respond with the given response. The mock is only used once. |
+
+Both of these functions have the same signature:
+
+```ts
+type FetchMockOperationFn = (
+    operation: FetchMockOperation,
+    response: MockResponse<any>,
+) => FetchMockFn;
+```
+
+# Operation Matching
+
+The `FetchMockOperation` type is either of type `string` or `RegExp`. When specified as a string, the URL of the request must match the string exactly. When specified as a regular expression, the URL of the request must match the regular expression.

package/src/__docs__/exports.mock-gql-fetch.stories.mdx

@@ -1,7 +1,7 @@
 import {Meta} from "@storybook/addon-docs";
 
 <Meta
-    title="Testing / Exports / mockGqlFetch()"
+    title="Testing / Mocking / Exports / mockGqlFetch()"
     parameters={{
         chromatic: {
             disableSnapshot: true,
@@ -19,19 +19,24 @@ The `mockGqlFetch` function provides an API to easily mock GraphQL responses for
 
 # API
 
-Besides being a function that fits the [`GqlFetchFn`](/docs/data-types-gqlfetchfn--page) signature, the return value of `mockGqlFetch()` has an API to customize the behavior of that function. Used in conjunction with the [`RespondWith`](/docs/testing-exports-respondwith--page) API, this can create a variety of GraphQL responses for testing and stories.
+Besides being a function that fits the [`GqlFetchFn`](/docs/data-types-gqlfetchfn--page) signature, the return value of `mockGqlFetch()` has an API to customize the behavior of that function. Used in conjunction with the [`RespondWith`](/docs/testing-mocking-exports-respondwith--page) API, this can create a variety of GraphQL responses for testing and stories.
 
 | Function | Purpose |
 | -------- | ------- |
 | `mockOperation` | When called, any GraphQL operation that matches the defined mock operation will respond with the given response. |
-| `mockOperationOnce` | When called, the first GraphQL operation that matches the defined mock operation will respond with the given response. The mock is only used by once. |
+| `mockOperationOnce` | When called, the first GraphQL operation that matches the defined mock operation will respond with the given response. The mock is only used once. |
 
 Both of these functions have the same signature:
 
 ```ts
-type GqlMockOperationFn = <TData, TVariables: {...}, TContext: GqlContext>(
-    matchOperation: GqlMockOperation<TData, TVariables, TContext>,
-    response: GqlMockResponse<TData>,
+type GqlMockOperationFn = <
+    TData: {...},
+    TVariables: {...},
+    TContext: GqlContext,
+    TResponseData: GraphQLJson<TData>,
+>(
+    operation: GqlMockOperation<TData, TVariables, TContext>,
+    response: MockResponse<TResponseData>,
 ) => GqlFetchMockFn;
 ```
 
@@ -40,8 +45,8 @@ type GqlMockOperationFn = <TData, TVariables: {...}, TContext: GqlContext>(
 The `matchOperation` parameter given to a `mockOperation` or `mockOperationOnce` function is a `GqlMockOperation` defining the actual GraphQL operation to be matched by the mock. The variables and context of the mocked operation change how the mock is matched against requests.
 
 ```ts
- type GqlMockOperation<
-    TData,
+type GqlMockOperation<
+    TData: {...},
     TVariables: {...},
     TContext: GqlContext,
 > = {|

package/src/__docs__/exports.respond-with.stories.mdx

@@ -1,7 +1,7 @@
 import {Meta} from "@storybook/addon-docs";
 
 <Meta
-    title="Testing / Exports / RespondWith"
+    title="Testing / Mocking / Exports / RespondWith"
     parameters={{
         chromatic: {
             disableSnapshot: true,
@@ -13,15 +13,61 @@ import {Meta} from "@storybook/addon-docs";
 
 ```ts
 interface RespondWith {
-    data: <TData>(data: TData) => GqlMockResponse<TData>;
-    unparseableBody: () => GqlMockResponse<any>;
-    abortedRequest: () => GqlMockResponse<any>;
-    errorStatusCode: (statusCode: number) => GqlMockResponse<any>,
-    nonGraphQLBody: () => GqlMockResponse<any>,
+    /**
+     * Rejects with an AbortError to simulate an aborted request.
+     */
+    abortedRequest: () => MockResponse<any>;
+
+    /**
+     * A non-200 status code with empty text body.
+     * Equivalent to calling `ResponseWith.text("", statusCode)`.
+     */
+    errorStatusCode: (statusCode: number) => MockResponse<any>;
+
+    /**
+     * Response with GraphQL data JSON body and status code 200.
+     */
+    graphQLData: <TData: {...}>(
+        data: TData,
+    ) => MockResponse<GraphQLJson<TData>>;
+
+    /**
+     * Response that is a GraphQL errors response with status code 200.
+     */
     graphQLErrors: (
         errorMessages: $ReadOnlyArray<string>,
-    ) => GqlMockResponse<any>,
+    ) => MockResponse<any>;
+
+    /**
+     * Response with JSON body and status code 200.
+     */
+    json: <TJson: {...}>(json: TJson): MockResponse<TJson>;
+
+    /**
+     * Response body that is valid JSON but not a valid GraphQL response.
+     */
+    nonGraphQLBody: () => MockResponse<any>;
+
+    /**
+     * Rejects with the given error.
+     */
+    reject: (error: Error) => MockResponse<any>;
+
+    /**
+     * Response with text body and status code.
+     * Status code defaults to 200.
+     */
+    text: <TData = string>(
+        text: string,
+        statusCode: number = 200,
+    ) => MockResponse<TData>;
+
+    /**
+     * Response with body that will not parse as JSON and status code 200.
+     */
+    unparseableBody: () => MockResponse<any>;
 });
 ```
 
-The `RespondWith` object is a helper for defining mock responses to use with the [`mockGqlFetch`](/docs/testing-exports-mockgqlfetch--page) API.
+The `RespondWith` object is a helper for defining mock responses to use with
+mock request methods such as [`mockGqlFetch`](/docs/testing-mocking-exports-mockgqlfetch--page).

package/src/__docs__/exports.setup-fixtures.stories.mdx

@@ -0,0 +1,22 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Fixtures / Exports / setupFixtures()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# setupFixtures()
+
+```ts
+setupFixtures<TAdapterOptions: {...}, TAdapterExports: {...}>(
+    configuration: $ReadOnly<
+        FixturesConfiguration<TAdapterOptions, TAdapterExports>,
+    >,
+);
+```
+
+This method configures the fixtures framework so that it can adapt defined fixtures to the framework that is to be supported. The configuration is of type [`FixturesConfiguration`](/docs/testing-fixtures-types-fixturesconfiguration--page).