Merge pull request #824 from wheresrhys/rhys/body-types

fix: handle all types of BodyInit correctly

.circleci/config.yml

@@ -8,7 +8,7 @@ references:
 
  node18: &node18
  docker:
- - image: cimg/node:18.0
+ - image: cimg/node:18.11
  nodelts: &nodelts
  docker:
  - image: cimg/node:lts

docs/docs/@fetch-mock/core/configuration.md

@@ -15,17 +15,11 @@ fetchMock.config.sendAsJson = false;
 
 Options marked with a `†` can also be overridden for individual calls to `.mock(matcher, response, options)` by setting as properties on the `options` parameter
 
-### sendAsJson<sup>†</sup>
-
-`{Boolean}` default: `true`
-
-Always convert objects passed to `.mock()` to JSON strings before building reponses. Can be useful to set to `false` globally if e.g. dealing with a lot of `ArrayBuffer`s. When `true` the `Content-Type: application/json` header will also be set on each response.
-
 ### includeContentLength<sup>†</sup>
 
 `{Boolean}` default: `true`
 
-Sets a `Content-Length` header on each response.
+Sets a `Content-Length` header on each response, with the exception of responses whose body is a `FormData` or `ReadableStream` instance as these are hard/impossible to calculate up front.
 
 ### matchPartialBody
 

docs/docs/@fetch-mock/core/route/response.md

@@ -32,9 +32,13 @@ If the object _only_ contains properties from among those listed below it is use
 
 ### body
 
-`{String|Object}`
+`{String|Object|BodyInit}`
 
-Set the `Response` body, e.g. `"Server responded ok"`, `{ token: 'abcdef' }`. See the `Object` section of the docs below for behaviour when passed an `Object`.
+Set the `Response` body. This could be
+
+- a string e.g. `"Server responded ok"`, `{ token: 'abcdef' }`.
+- an object literal (see the `Object` section of the docs below).
+- Anything else that satisfies the specification for the [body parameter of new Response()](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#body). This currently allows instances of Blob, ArrayBuffer, TypedArray, DataView, FormData, ReadableStream, URLSearchParams, and String.
 
 ### status
 
@@ -62,9 +66,15 @@ Forces `fetch` to return a `Promise` rejected with the value of `throws` e.g. `n
 
 ## Object
 
-`{Object|ArrayBuffer|...`
+`{Object}`
+
+Any object literal that does not match the schema for a response config will be converted to a `JSON` string and set as the response `body`.
+
+The `Content-Type: application/json` header will also be set on each response. To send JSON responses that do not set this header (e.g. to mock a poorly configured server) manually convert the object to a string first e.g.
 
-If the `sendAsJson` option is set to `true`, any object that does not match the schema for a response config will be converted to a `JSON` string and set as the response `body`. Otherwise, the object will be set as the response `body` (useful for `ArrayBuffer`s etc.)
+```js
+fetchMock.route('http://a.com', JSON.stringify({ prop: 'value' }));
+```
 
 ## Promise
 

packages/core/package.json

@@ -18,7 +18,7 @@
  "types": "./dist/esm/index.d.ts",
  "type": "module",
  "engines": {
- "node": ">=18.0.0"
+ "node": ">=18.11.0"
  },
  "dependencies": {
  "@types/glob-to-regexp": "^0.4.4",

packages/core/src/FetchMock.ts

@@ -5,7 +5,6 @@ import CallHistory from './CallHistory.js';
 import * as requestUtils from './RequestUtils.js';
 
 export type FetchMockGlobalConfig = {
- sendAsJson?: boolean;
  includeContentLength?: boolean;
  matchPartialBody?: boolean;
  allowRelativeUrls?: boolean;
@@ -20,7 +19,6 @@ export type FetchMockConfig = FetchMockGlobalConfig & FetchImplementations;
 
 export const defaultFetchMockConfig: FetchMockConfig = {
  includeContentLength: true,
- sendAsJson: true,
  matchPartialBody: false,
  Request: globalThis.Request,
  Response: globalThis.Response,

packages/core/src/Route.ts

@@ -42,7 +42,7 @@ export type RouteConfig = UserRouteConfig &
  FetchImplementations &
  InternalRouteConfig;
 export type RouteResponseConfig = {
- body?: string | object;
+ body?: BodyInit | object;
  status?: number;
  headers?: {
  [key: string]: string;
@@ -72,6 +72,22 @@ export type RouteResponse =
  | RouteResponseFunction;
 export type RouteName = string;
 
+function isBodyInit(body: BodyInit | object): body is BodyInit {
+ return (
+ body instanceof Blob ||
+ body instanceof ArrayBuffer ||
+ // checks for TypedArray
+ ArrayBuffer.isView(body) ||
+ body instanceof DataView ||
+ body instanceof FormData ||
+ body instanceof ReadableStream ||
+ body instanceof URLSearchParams ||
+ body instanceof String ||
+ typeof body === 'string' ||
+ body === null
+ );
+}
+
 function sanitizeStatus(status?: number): number {
  if (!status) {
  return 200;
@@ -194,31 +210,48 @@ class Route {
  constructResponseBody(
  responseInput: RouteResponseConfig,
  responseOptions: ResponseInitUsingHeaders,
- ): string | null {
- // start to construct the body
+ ): BodyInit {
  let body = responseInput.body;
- // convert to json if we need to
- if (typeof body === 'object') {
- if (this.config.sendAsJson && responseInput.body != null) {
+ const bodyIsBodyInit = isBodyInit(body);
+
+ if (!bodyIsBodyInit) {
+ if (typeof body === 'undefined') {
+ body = null;
+ } else if (typeof body === 'object') {
+ // convert to json if we need to
  body = JSON.stringify(body);
  if (!responseOptions.headers.has('Content-Type')) {
  responseOptions.headers.set('Content-Type', 'application/json');
  }
+ } else {
+ throw new TypeError('Invalid body provided to construct response');
  }
  }
 
- if (typeof body === 'string') {
- // add a Content-Length header if we need to
- if (
- this.config.includeContentLength &&
- !responseOptions.headers.has('Content-Length')
+ // add a Content-Length header if we need to
+ if (
+ this.config.includeContentLength &&
+ !responseOptions.headers.has('Content-Length') &&
+ !(body instanceof ReadableStream) &&
+ !(body instanceof FormData)
+ ) {
+ let length = 0;
+ if (body instanceof Blob) {
+ length = body.size;
+ } else if (
+ body instanceof ArrayBuffer ||
+ ArrayBuffer.isView(body) ||
+ body instanceof DataView
  ) {
- responseOptions.headers.set('Content-Length', body.length.toString());
+ length = body.byteLength;
+ } else if (body instanceof URLSearchParams) {
+ length = body.toString().length;
+ } else if (typeof body === 'string' || body instanceof String) {
+ length = body.length;
  }
- return body;
+ responseOptions.headers.set('Content-Length', length.toString());
  }
- // @ts-expect-error TODO need to implement handling of non-string bodies properlyy
- return body || null;
+ return body as BodyInit;
  }
 
  static defineMatcher(matcher: MatcherDefinition) {

packages/core/src/Router.ts

@@ -273,8 +273,8 @@ export default class Router {
  if (typeof response[name] === 'function') {
  //@ts-expect-error TODO probably make use of generics here
  return new Proxy(response[name], {
- apply: (matcherFunction, thisArg, args) => {
- const result = matcherFunction.apply(response, args);
+ apply: (func, thisArg, args) => {
+ const result = func.apply(response, args);
  if (result.then) {
  pendingPromises.push(
  //@ts-expect-error TODO probably make use of generics here