Jest Snapshot Property Matcher Not Working Fix

In this tutorial, you'll learn about Jest Snapshot Property Matcher Not Working Fix. We cover key concepts, practical examples, and best practices.

Your snapshot test fails because of dynamic fields like IDs, timestamps, or random values — even though the actual data structure is correct.

The Problem

// WRONG — no property matchers for dynamic data
test('renders order', () => {
  const order = {
    id: generateId(),
    createdAt: new Date(),
    total: 99.99,
    status: 'pending',
  };
  expect(order).toMatchSnapshot();
});

Snapshot mismatch:
- "id": "ord_abc123",
+ "id": "ord_def456",
- "createdAt": 2024-06-15T10:00:00.000Z,
+ "createdAt": 2024-06-16T14:30:00.000Z,

The test fails every run because id and createdAt change each time.

Step-by-Step Fix

1. Use property matchers in toMatchSnapshot

// RIGHT — property matchers handle dynamic values
test('renders order', () => {
  const order = {
    id: generateId(),
    createdAt: new Date(),
    total: 99.99,
    status: 'pending',
  };

  expect(order).toMatchSnapshot({
    id: expect.stringMatching(/^ord_/),
    createdAt: expect.any(Date),
  });
});

2. Combine multiple asymmetric matchers

// RIGHT — various matchers for different types
const response = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  score: 95.5,
tags: ['admin', 'premium'],
  metadata: null,
};

expect(response).toMatchSnapshot({
  id: expect.any(Number),
  email: expect.stringMatching(/@example\.com$/),
  score: expect.any(Number),
tags: expect.arrayContaining(['admin']),
  metadata: expect.anything(),
});

3. Use expect.closeTo for floating point

// RIGHT — approximate float matching
const price = { amount: 10.99 + 0.01, currency: 'USD' };

expect(price).toMatchSnapshot({
  amount: expect.closeTo(11.0, 2), // Within 2 decimal places
});

4. Nest matchers in deep structures

// RIGHT — nested property matchers
const complex = {
  user: { id: 1, profile: { avatar: 'https://example.com/avatar.jpg' } },
  audit: { createdAt: new Date(), updatedAt: new Date() },
};

expect(complex).toMatchSnapshot({
  user: {
    id: expect.any(Number),
    profile: {
      avatar: expect.stringMatching(/^https?:\/\//),
    },
  },
  audit: {
    createdAt: expect.any(Date),
    updatedAt: expect.any(Date),
  },
});

Expected output:

PASS  tests/matcher.test.js
  ✓ uses property matchers (6 ms)
  ✓ handles nested matchers (5 ms)

Prevention Tips

• Always add property matchers for dynamic fields
• Use expect.any(Constructor) for type checking
• Use expect.stringMatching(regex) for pattern validation
• Use expect.arrayContaining() for array subsets
• Use expect.closeTo() for floating point values

Common Mistakes with snapshot property matcher

1. Non-exhaustive pattern matches that compile with warnings then crash at runtime
2. Misunderstanding that String is [Char] with poor performance for large text operations
3. Using foldl instead of foldl' causing stack overflow on large lists

These mistakes appear frequently in real-world JEST code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ