Generating Unified Diffs for Jest Snapshot Mismatches

Snapshot testing in Jest is a powerful tool for verifying UI components and other complex data structures. However, when snapshots drift, the default diff output can be difficult to parse, especially for large or complex changes. This challenge focuses on creating a more human-readable "unified diff" format for Jest snapshot mismatches, similar to what git diff produces, to improve the developer experience.

Problem Description

Your task is to implement a custom Jest snapshot serializer that intercepts snapshot mismatches and generates a unified diff output. This unified diff should highlight added and removed lines clearly, making it easier to understand the changes between the expected and actual snapshot content.

Requirements:

• Create a Jest snapshot serializer that extends Jest's built-in capabilities.
• When a snapshot mismatch occurs, this serializer should not just show the raw diff but should format it as a unified diff.
• The unified diff should follow common conventions:
  • Lines starting with + indicate added content.
  • Lines starting with - indicate removed content.
  • Lines starting with (space) indicate context.
  • Header lines (e.g., --- a/..., +++ b/..., @@ ... @@) should be included.
• The serializer should handle various data types that Jest snapshots typically serialize (e.g., objects, arrays, strings).

Expected Behavior:

When a test fails due to a snapshot mismatch, instead of the default Jest diff, the output should display the unified diff format, making it easier to visually inspect what has changed in the snapshot.

Edge Cases:

• Empty snapshots (both expected and actual).
• Snapshots with only added or only removed lines.
• Complex nested objects and arrays.
• Binary data (though focus is on text-based diffs).

Examples

Example 1:

Input (Jest Test Code):
test('should update snapshot', () => {
  const data = {
    name: 'Alice',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'Anytown',
    },
  };
  expect(data).toMatchSnapshot();
});

// Assume the previous snapshot was:
// {
//   name: 'Alice',
//   age: 31, // <-- Changed
//   address: {
//     street: '123 Main St',
//     city: 'Anytown',
//   },
// }

Output (Custom Diff):
Snapshot Summary
- Snapshot with update
Expected
+ Object {
+  "address": Object {
+    "city": "Anytown",
+    "street": "123 Main St",
+  },
+  "age": 30,
+  "name": "Alice",
+}
Received
- Object {
-  "address": Object {
-    "city": "Anytown",
-    "street": "123 Main St",
-  },
-  "age": 31,
-  "name": "Alice",
-}

--- a/path/to/snapshot.snap
+++ b/path/to/snapshot.snap
@@ -1,10 +1,9 @@
 Object {
   "address": Object {
     "city": "Anytown",
     "street": "123 Main St",
   },
-  "age": 31,
+  "age": 30,
   "name": "Alice",
 }

Explanation: The original snapshot had `age: 31`, while the received data has `age: 30`. The unified diff clearly shows this single line change with a `-` for the removed old value and a `+` for the added new value, along with surrounding context.

Example 2:

Input (Jest Test Code):
test('should add new property', () => {
  const data = {
    id: 1,
    status: 'active',
    createdAt: '2023-10-27T10:00:00Z', // <-- New
  };
  expect(data).toMatchSnapshot();
});

// Assume the previous snapshot was:
// {
//   id: 1,
//   status: 'active',
// }

Output (Custom Diff):
Snapshot Summary
- Snapshot with new property
Expected
+ Object {
+  "createdAt": "2023-10-27T10:00:00Z",
+  "id": 1,
+  "status": "active",
+}
Received
- Object {
-  "id": 1,
-  "status": "active",
-}

--- a/path/to/snapshot.snap
+++ b/path/to/snapshot.snap
@@ -1,5 +1,6 @@
 Object {
+  "createdAt": "2023-10-27T10:00:00Z",
   "id": 1,
   "status": "active",
 }

Explanation: The new snapshot adds a `createdAt` property. The unified diff shows this as added lines prefixed with `+`.

Example 3: (Edge Case - Entirely New Content)

Input (Jest Test Code):
test('should create a new snapshot', () => {
  const initialData = {};
  expect(initialData).toMatchSnapshot();
});

// Assume no previous snapshot existed. Jest will typically prompt to create one.
// For this challenge, imagine a scenario where we "receive" data and it's completely new.

Output (Custom Diff):
Snapshot Summary
- New snapshot creation
Expected
+ Object {}
Received
- Object {}

--- a/path/to/snapshot.snap
+++ b/path/to/snapshot.snap
@@ -0,0 +1 @@
+Object {}

Explanation: When a new snapshot is created, the unified diff will show all the received content as added lines, with an empty diff header for the 'from' file.

Constraints

• The solution must be implemented in TypeScript.
• The custom serializer should be integrated with Jest.
• Focus on generating human-readable text diffs for JSON-like structures. Handling binary diffs is out of scope.
• The generated unified diff should be understandable to a developer reviewing changes.
• Performance should be reasonable for typical snapshot sizes; extreme optimization is not the primary goal.

Notes

• You will likely need to leverage Jest's snapshotSerializers configuration in your jest.config.js file.
• Consider how to obtain the "old" snapshot content and the "new" received content. Jest provides this information during the test execution when a mismatch occurs.
• You might find inspiration from existing diffing libraries or Jest's internal diffing mechanisms.
• The core of the problem is transforming the raw difference between two strings into the unified diff format.