Jest Inline Snapshot Mastery

This challenge focuses on a powerful Jest feature: inline snapshots. Inline snapshots allow you to embed the expected output directly within your test file, making tests more readable and maintainable. You'll learn to generate and update these snapshots, improving your Jest testing workflow.

Problem Description

Your task is to write a Jest test that uses inline snapshots to verify the output of a given function. You will be provided with a simple function that transforms data. Your goal is to write a test for this function and, instead of manually writing the expected output, leverage Jest's ability to generate and update inline snapshots.

What needs to be achieved:

1. Write a Jest test for the provided processUserData function.
2. Use Jest's inline snapshot functionality to capture the output of the function.
3. Ensure the test passes with the generated inline snapshot.

Key requirements:

• The test must be written in TypeScript.
• You must use expect(value).toMatchInlineSnapshot() or expect(value).toMatchSnapshot() (and then convert to inline).
• The test should cover a typical use case of the function.

Expected behavior: When the test is run for the first time (or after updating the snapshot), Jest will create an inline snapshot of the function's output. Subsequent runs will compare the actual output against this snapshot.

Important edge cases to consider:

• What happens if the input data is an empty array?
• What happens if the input data has missing properties? (While the provided function is simple, consider this for future reference).

Examples

Example 1:

Input to `processUserData`:
[
  { id: 1, name: "Alice", email: "alice@example.com", isActive: true },
  { id: 2, name: "Bob", email: "bob@example.com", isActive: false }
]

Expected test output (after running with `--updateSnapshot`):
// Snapshot
const processUserData = (users) => {
  return users
    .filter((user) => user.isActive)
    .map((user) => ({
      userId: user.id,
      displayName: user.name.toUpperCase(),
    }));
};

test('should process active users and format their data', () => {
  const users = [
    { id: 1, name: "Alice", email: "alice@example.com", isActive: true },
    { id: 2, name: "Bob", email: "bob@example.com", isActive: false }
  ];
  const processed = processUserData(users);
  expect(processed).toMatchInlineSnapshot(`
    [
      {
        "userId": 1,
        "displayName": "ALICE"
      }
    ]
  `);
});

Example 2:

Input to `processUserData`:
[]

Expected test output (after running with `--updateSnapshot`):
// Snapshot
const processUserData = (users) => {
  return users
    .filter((user) => user.isActive)
    .map((user) => ({
      userId: user.id,
      displayName: user.name.toUpperCase(),
    }));
};

test('should return an empty array for no users', () => {
  const users = [];
  const processed = processUserData(users);
  expect(processed).toMatchInlineSnapshot(`[]`);
});

Constraints

• The processUserData function will always return an array of objects.
• The input to processUserData will be an array of user objects, where each object may have id (number), name (string), email (string), and isActive (boolean) properties. The function is designed to handle cases where isActive might be missing or false.
• Your test should be efficient and not introduce significant overhead.

Notes

• You will need to set up a basic Jest environment for TypeScript. This typically involves installing jest, ts-jest, and @types/jest.
• To generate or update snapshots, you'll run your Jest tests with the --updateSnapshot (or -u) flag: jest --updateSnapshot.
• When you run Jest for the first time with a new snapshot test, it will create the snapshot file (__snapshots__/your_test_file.spec.ts.snap). Inline snapshots embed this data directly into your test file.
• Focus on understanding how toMatchInlineSnapshot works. It captures the value of the expression you pass to expect().

Provided Function (for reference, do not modify):

// utils.ts
export const processUserData = (users: Array<{
  id: number;
  name: string;
  email: string;
  isActive?: boolean;
}>): Array<{ userId: number; displayName: string }> => {
  return users
    .filter((user) => user.isActive)
    .map((user) => ({
      userId: user.id,
      displayName: user.name.toUpperCase(),
    }));
};