o11y/frontend/.cursor/rules/testing-mock-strategy.mdc

---
description: When to use global vs local mocks in tests
globs: **/*.test.{ts,tsx}
alwaysApply: false
---

# Mock Strategy

## Use Global Mocks For

High-frequency dependencies (20+ test files):
- Core infrastructure: react-router-dom, react-query, antd
- Browser APIs: ResizeObserver, matchMedia, localStorage
- Utility libraries: date-fns, lodash

Available global mock files (from jest.config.ts):
- `uplot` -> `__mocks__/uplotMock.ts`

## Use Local Mocks For

- Business logic dependencies (API endpoints, custom hooks, domain components)
- Test-specific behavior (different data per test, error scenarios, loading states)

## Decision Tree

```
Used in 20+ test files?
  YES -> Global mock
  NO  -> Business logic or test-specific?
    YES -> Local mock
    NO  -> Consider global if usage grows
```

## Correct Usage

```ts
// Global mocks are already available - just import
import { useLocation } from 'react-router-dom';

// Local mocks for business logic
jest.mock('../api/tracesService', () => ({
  getTraces: jest.fn(() => mockTracesData),
}));
```

## Anti-patterns

```ts
// Never re-mock globally mocked dependencies locally
jest.mock('react-router-dom', () => ({ ... }));

// Never put test-specific data in global mocks
jest.mock('../api/tracesService', () => ({ getTraces: jest.fn(() => specificTestData) }));
```