Extend toHaveFetched error message to show options diff

jest-extensions.js

@@ -1,3 +1,11 @@
+const diff = require('jest-diff').default;
+const {
+	printReceived,
+	printExpected,
+	matcherHint,
+} = require('jest-matcher-utils');
+const chalk = require('chalk');
+
 const callsAreEqual = (c1, c2) => {
 	if (!c1 && !c2) return true;
 	if (!c1 || !c2) return false;
@@ -10,11 +18,73 @@ const callsAreEqual = (c1, c2) => {
 	return true;
 };
 
+const methodVerbMap = [
+	'Got:get',
+	'Posted:post',
+	'Put:put',
+	'Deleted:delete',
+	'FetchedHead:head',
+	'Patched:patch',
+];
+
+const parseOptionsBody = (call) => {
+	if (!call[1] || !call[1].body) return call[1];
+	let body;
+	try {
+		body = JSON.parse(call[1].body);
+	} catch (e) {
+		body = call[1].body;
+	}
+
+	return call[1] && call[1].method
+		? { ...call[1], body, method: call[1].method.toLowerCase() }
+		: { ...call[1], body };
+};
+
+const buildOptionsDiffMessage = (options) => (acc, call, index) => {
+	const parsedOptions = parseOptionsBody(call);
+	const diffString = diff(options, parsedOptions, {
+		expand: this.expand,
+	});
+	const header = `${acc}\n\n${chalk.dim(`- Call ${index + 1} (${call[0]})`)}`;
+
+	if (!diffString) return acc;
+	return diffString.includes('- Expect')
+		? `${header}\nDifference:\n\n${diffString}`
+		: `${header}\nExpected options: ${printExpected(options)}\n` +
+				`Received options: ${printReceived(parsedOptions)}`;
+};
+
 const methodlessExtensions = {
 	toHaveFetched: (fetchMock, url, options) => {
 		if (fetchMock.called(url, options)) {
 			return { pass: true };
 		}
+
+		const method = options && options.method ? options.method : 'get';
+		const [humanVerb] = methodVerbMap
+			.find((verbMethod) => verbMethod.includes(`:${method}`))
+			.split(':');
+		const messageHeader = `${matcherHint(
+			`toHave${humanVerb}`,
+			undefined,
+			undefined,
+			options
+		)}\n\nNo ${method} request was made with the expected options.`;
+
+		if (fetchMock.called(url)) {
+			const message = () => {
+				return fetchMock
+					.filterCalls(url)
+					.reduce(buildOptionsDiffMessage(options), messageHeader);
+			};
+
+			return {
+				pass: false,
+				message,
+			};
+		}
+
 		return {
 			pass: false,
 			message: () => `fetch should have been called with ${url}`,
@@ -83,14 +153,7 @@ expect.extend({
 	},
 });
 
-[
-	'Got:get',
-	'Posted:post',
-	'Put:put',
-	'Deleted:delete',
-	'FetchedHead:head',
-	'Patched:patch',
-].forEach((verbs) => {
+methodVerbMap.forEach((verbs) => {
 	const [humanVerb, method] = verbs.split(':');
 
 	const extensions = Object.entries(methodlessExtensions)

package.json

@@ -1,56 +1,59 @@
 {
-  "name": "fetch-mock-jest",
-  "version": "0.0.0",
-  "description": "Jest wrapper for fetch-mock, a comprehensive stub for fetch",
-  "main": "server.js",
-  "browser": "browser.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/wheresrhys/fetch-mock-jest.git"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
-  "keywords": [
-    "fetch",
-    "http",
-    "mock",
-    "testing",
-    "spy",
-    "jest"
-  ],
-  "funding": {
-    "type": "charity",
-    "url": "https://www.justgiving.com/refugee-support-europe"
-  },
-  "author": "Rhys Evans",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/wheresrhys/fetch-mock-jest/issues"
-  },
-  "peerDependencies": {
-    "node-fetch": "*"
-  },
-  "homepage": "https://github.com/wheresrhys/fetch-mock-jest#readme",
-  "dependencies": {
-    "fetch-mock": "^9.11.0"
-  },
-  "devDependencies": {
-    "eslint": "^6.6.0",
-    "eslint-config-origami-component": "^2.0.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "jest": "^25.0.0",
-    "node-fetch": "^2.6.0",
-    "prettier": "^2.0.4"
-  },
-  "peerDependenciesMeta": {
-    "node-fetch": {
-      "optional": true
-    }
-  }
+	"name": "fetch-mock-jest",
+	"version": "0.0.0",
+	"description": "Jest wrapper for fetch-mock, a comprehensive stub for fetch",
+	"main": "server.js",
+	"browser": "browser.js",
+	"types": "index.d.ts",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/wheresrhys/fetch-mock-jest.git"
+	},
+	"engines": {
+		"node": ">=8.0.0"
+	},
+	"keywords": [
+		"fetch",
+		"http",
+		"mock",
+		"testing",
+		"spy",
+		"jest"
+	],
+	"funding": {
+		"type": "charity",
+		"url": "https://www.justgiving.com/refugee-support-europe"
+	},
+	"author": "Rhys Evans",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/wheresrhys/fetch-mock-jest/issues"
+	},
+	"peerDependencies": {
+		"node-fetch": "*"
+	},
+	"homepage": "https://github.com/wheresrhys/fetch-mock-jest#readme",
+	"dependencies": {
+		"fetch-mock": "^9.11.0"
+	},
+	"devDependencies": {
+		"chalk": "^4.1.0",
+		"eslint": "^6.6.0",
+		"eslint-config-origami-component": "^2.0.0",
+		"eslint-config-prettier": "^6.5.0",
+		"eslint-plugin-prettier": "^3.1.1",
+		"jest": "^25.0.0",
+		"jest-diff": "^25.5.0",
+		"jest-matcher-utils": "^25.5.0",
+		"node-fetch": "^2.6.0",
+		"prettier": "^2.0.4"
+	},
+	"peerDependenciesMeta": {
+		"node-fetch": {
+			"optional": true
+		}
+	}
 }