Mappersmith partial match is not very easy to parse and identify why something is not matching

[klippx]

"[Mappersmith Test] No exact match found for \"POST http://example.org/blogs\" (body: \"{\"title\":\"title\",\"data\":{\"nestedItemTwo\":2,\"nestedItemOne\":1,\"nestingLevelTwo\":{\"deepNestedItemTwo\":2,\"deepNestedItemOne\":1}}}\"; headers: \"\"), partial match with \"POST http://example.org/blogs\" (body: \"{\"title\":\"title\",\"data\":{\"nestedItemOne\":1,\"nestedItemTwo\":2,\"nestingLevelTwo\":{\"deepNestedItemOne\":1,\"deepNestedItemTwo\":2}}}\"; headers: \"\"), check your mock definition"

What I do is usually to line break on POST http and then scroll to the right slowly until I can see why it's a diff... 😢

POST http://example.org/blogs\" (body: \"{\"title\":\"title\",\"data\":{\"nestedItemTwo\":2,\"nestedItemOne\":1,\"nestingLevelTwo\":{\"deepNestedItemTwo\":2,\"deepNestedItemOne\":1}}}\"; headers: \"\")
POST http://example.org/blogs\" (body: \"{\"title\":\"title\",\"data\":{\"nestedItemOne\":1,\"nestedItemTwo\":2,\"nestingLevelTwo\":{\"deepNestedItemOne\":1,\"deepNestedItemTwo\":2}}}\"; headers: \"\"), check your mock definition"

What would be nice is to have a diff where it was obvious what went wrong, such as:

"[Mappersmith Test] No exact match found for \"POST http://example.org/blogs\" - partial match with:"
{
   "body": {
     "title": "title",
     "data": {
-      "nestedItemTwo": 2,
+      "nestedItemOne": 1,
-      "nestedItemOne": 1,
+      "nestedItemTwo": 2,
       "nestingLevelTwo": {
-        "deepNestedItemTwo": 2,
+        "deepNestedItemOne": 1,
-        "deepNestedItemOne": 1
+        "deepNestedItemTwo": 2
       }
     }
   },
 }

[klippx]

Discussed ideas:

One idea could be a middleware exposed in mappersmith/test that you opt-in

export const createDebugMockMiddleware: Middleware = () => ({
  response: async (next) => {
    try {
      return await next()
    } catch (e) {
      if ('message' in e && typeof e.message === 'string' && e.message.length > 0) {
        const { message } = e
        if (message.match(/\[Mappersmith Test\]/)) {
          console.log(awesomeFormat(message))
        }
      }
      throw e
    }
  },
})

Another idea is to use jest object matchers and the built in diff from there.