Enhanced Jest Snapshot Diffing with Contextual Information

Snapshot testing is a powerful tool for ensuring UI consistency, but standard Jest snapshots can be difficult to debug when failures occur. This challenge asks you to enhance Jest's snapshot diffing by adding contextual information to the snapshot comparison output, making it easier to identify the specific changes and their surrounding context within the component. This will significantly improve the debugging experience when snapshot tests fail.

Problem Description

You need to create a Jest snapshot diffing plugin that modifies the default snapshot comparison behavior. When a snapshot test fails, instead of just showing the diff between the old and new snapshots, your plugin should also include a snippet of the component's code surrounding the line(s) where the difference occurs. This contextual code snippet will help developers quickly understand why the snapshot changed.

What needs to be achieved:

• Create a Jest snapshot diffing plugin.
• The plugin should intercept the snapshot comparison process when a test fails.
• When a failure occurs, the plugin should extract a code snippet from the component's source file, centered around the line(s) where the snapshot difference is detected.
• The plugin should augment the default Jest failure output with this code snippet, clearly labeled as "Contextual Code Snippet."

Key Requirements:

• The plugin must be compatible with Jest's existing snapshot testing mechanism.
• The code snippet should be reasonably sized (e.g., 5-10 lines around the changed line).
• The plugin should handle cases where the source file is not available (e.g., the component is dynamically generated).
• The plugin should not significantly impact the performance of snapshot tests when they pass.
• The plugin should be written in TypeScript.

Expected Behavior:

When a snapshot test fails, the output should include:

1. The standard Jest snapshot diff output (showing the differences between the old and new snapshots).
2. A clearly labeled "Contextual Code Snippet" section containing the relevant code from the component's source file.

Edge Cases to Consider:

• No Source Map: The component might be generated dynamically and not have a source map available. In this case, the plugin should gracefully handle the situation and not attempt to extract a code snippet.
• Large Diffs: If the diff is very large, extracting a meaningful code snippet might be difficult. Consider how to handle such cases (e.g., provide a smaller snippet or a message indicating that the diff is too large).
• Minified Code: The component's source code might be minified. While ideally, you'd want to use a source map, consider how to handle cases where one isn't available.
• Asynchronous Components: Ensure the plugin works correctly with asynchronous components and their snapshots.

Examples

Example 1:

Input: A Jest snapshot test fails, and the component's source code is:

```typescript
function MyComponent({ name }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

And the snapshot difference is on the line <h1>Hello, {name}</h1>.

Output:

Snapshot mismatch after transformations:

Expected: ... (old snapshot)
Received: ... (new snapshot)

Contextual Code Snippet:
```typescript
function MyComponent({ name }) {
  return (
    <div>
      <p>This is a paragraph.</p>
      <h1>Hello, {name}</h1>
    </div>
  );
}

Explanation: The output shows the standard snapshot diff and then includes the 5 lines of code surrounding the line where the difference was detected.

Example 2:

Input: A Jest snapshot test fails, and the component is dynamically generated (no source map).

Output:

Snapshot mismatch after transformations:

Expected: ... (old snapshot) Received: ... (new snapshot)

Contextual Code Snippet: Unable to extract code snippet. Component may be dynamically generated.

Explanation: The plugin gracefully handles the case where a source map is not available.

## Constraints

*   **Plugin Size:** The plugin should be relatively small and easy to understand.
*   **Performance:** The plugin should not add significant overhead to passing snapshot tests (less than 10% increase in execution time).
*   **TypeScript:** The plugin must be written in TypeScript.
*   **Jest Version:** The plugin should be compatible with Jest versions 27 and above.
*   **Code Snippet Size:** The code snippet should be limited to a maximum of 15 lines.

## Notes

*   You'll need to leverage Jest's snapshot diffing API to intercept the comparison process.  Look into `jest.mock` and potentially `jest.run` to achieve this.
*   Consider using a library like `prettier` to format the code snippet for better readability.
*   Debugging Jest plugins can be tricky. Use `console.log` liberally to understand the flow of execution.
*   Think about how to handle different types of components (functional, class-based).
*   The primary goal is to provide *useful* context, not to extract the entire component's source code.