jest-typescript — Skillopedia

Jest + TypeScript - Industry Standard Testing Overview Jest is the industry-standard testing framework with 70% market share, providing a mature, battle-tested ecosystem for TypeScript projects. It offers comprehensive testing capabilities with built-in snapshot testing, mocking, and coverage reporting. Key Features : - 🏆 Industry Standard : 70% market share, widely adopted - 📦 All-in-One : Test runner, assertions, mocks, coverage in one package - 📸 Snapshot Testing : Built-in snapshot support for UI testing - 🧪 React Integration : React Testing Library, enzyme compatibility - 🔧 Mature E…

: 'identity-obj-proxy',\n '\\\\.(jpg|jpeg|png|gif|svg)

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

: '\u003crootDir>/__mocks__/fileMock.js',\n },\n transform: {\n '^.+\\\\.tsx?

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

: ['ts-jest', {\n tsconfig: {\n jsx: 'react-jsx',\n },\n }],\n },\n};\n\nexport default config;\n```\n\n**src/test/setup.ts**:\n```typescript\nimport '@testing-library/jest-dom';\nimport { cleanup } from '@testing-library/react';\nimport { afterEach } from '@jest/globals';\n\nafterEach(() => {\n cleanup();\n});\n```\n\n### React Component Testing\n\n```typescript\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { Counter } from './Counter';\n\ndescribe('Counter Component', () => {\n it('renders initial count', () => {\n render(\u003cCounter initialCount={0} />);\n expect(screen.getByText('Count: 0')).toBeInTheDocument();\n });\n\n it('increments counter on button click', async () => {\n const user = userEvent.setup();\n render(\u003cCounter initialCount={0} />);\n\n const button = screen.getByRole('button', { name: /increment/i });\n await user.click(button);\n\n expect(screen.getByText('Count: 1')).toBeInTheDocument();\n });\n\n it('calls onChange callback with correct value', async () => {\n const onChange = jest.fn();\n const user = userEvent.setup();\n\n render(\u003cCounter initialCount={5} onChange={onChange} />);\n\n await user.click(screen.getByRole('button', { name: /increment/i }));\n\n expect(onChange).toHaveBeenCalledWith(6);\n expect(onChange).toHaveBeenCalledTimes(1);\n });\n\n it('disables button when max count reached', () => {\n render(\u003cCounter initialCount={10} maxCount={10} />);\n\n const button = screen.getByRole('button', { name: /increment/i });\n expect(button).toBeDisabled();\n });\n});\n```\n\n### Testing Hooks\n\n```typescript\nimport { renderHook, act } from '@testing-library/react';\nimport { useCounter } from './useCounter';\n\ndescribe('useCounter Hook', () => {\n it('initializes with default value', () => {\n const { result } = renderHook(() => useCounter(0));\n expect(result.current.count).toBe(0);\n });\n\n it('increments counter', () => {\n const { result } = renderHook(() => useCounter(0));\n\n act(() => {\n result.current.increment();\n });\n\n expect(result.current.count).toBe(1);\n });\n\n it('decrements counter', () => {\n const { result } = renderHook(() => useCounter(5));\n\n act(() => {\n result.current.decrement();\n });\n\n expect(result.current.count).toBe(4);\n });\n\n it('resets to initial value', () => {\n const { result } = renderHook(() => useCounter(10));\n\n act(() => {\n result.current.increment();\n result.current.increment();\n });\n\n expect(result.current.count).toBe(12);\n\n act(() => {\n result.current.reset();\n });\n\n expect(result.current.count).toBe(10);\n });\n});\n```\n\n### Testing Async Components\n\n```typescript\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UserProfile } from './UserProfile';\nimport * as api from './api';\n\njest.mock('./api');\n\ndescribe('UserProfile Async', () => {\n it('loads and displays user data', async () => {\n const mockUser = { id: 1, name: 'Alice', email: '[email protected]' };\n jest.mocked(api.fetchUser).mockResolvedValue(mockUser);\n\n render(\u003cUserProfile userId={1} />);\n\n expect(screen.getByText('Loading...')).toBeInTheDocument();\n\n await waitFor(() => {\n expect(screen.getByText('Alice')).toBeInTheDocument();\n });\n\n expect(screen.getByText('[email protected]')).toBeInTheDocument();\n });\n\n it('displays error on fetch failure', async () => {\n jest.mocked(api.fetchUser).mockRejectedValue(new Error('Network error'));\n\n render(\u003cUserProfile userId={1} />);\n\n await waitFor(() => {\n expect(screen.getByText(/error/i)).toBeInTheDocument();\n });\n });\n});\n```\n\n## Snapshot Testing\n\n### Component Snapshots\n\n```typescript\nimport { render } from '@testing-library/react';\nimport { UserCard } from './UserCard';\n\ndescribe('UserCard Snapshots', () => {\n it('matches snapshot for regular user', () => {\n const { container } = render(\n \u003cUserCard\n name=\"Alice\"\n email=\"[email protected]\"\n role=\"user\"\n />\n );\n\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('matches snapshot for admin user', () => {\n const { container } = render(\n \u003cUserCard\n name=\"Bob\"\n email=\"[email protected]\"\n role=\"admin\"\n />\n );\n\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('uses inline snapshot', () => {\n const user = { id: 1, name: 'Charlie', role: 'user' };\n\n expect(user).toMatchInlineSnapshot(`\n {\n \"id\": 1,\n \"name\": \"Charlie\",\n \"role\": \"user\",\n }\n `);\n });\n});\n```\n\n### Updating Snapshots\n\n```bash\n# Update all snapshots\njest --updateSnapshot\njest -u\n\n# Update snapshots for specific test file\njest UserCard.test.tsx -u\n\n# Interactive snapshot update\njest --watch\n# Press 'u' to update failing snapshots\n```\n\n### Custom Snapshot Serializers\n\n```typescript\n// __tests__/serializers/dateSerializer.ts\nexport default {\n test: (val: any) => val instanceof Date,\n print: (val: Date) => `Date(${val.toISOString()})`,\n};\n```\n\n**jest.config.ts**:\n```typescript\nconst config: Config = {\n snapshotSerializers: ['\u003crootDir>/__tests__/serializers/dateSerializer.ts'],\n};\n```\n\n## Async Testing\n\n### Testing Promises\n\n```typescript\nimport { fetchData, saveData } from './api';\n\ndescribe('Async Operations', () => {\n it('resolves with data', async () => {\n const data = await fetchData(1);\n expect(data).toBeDefined();\n expect(data.id).toBe(1);\n });\n\n it('handles promise rejection', async () => {\n await expect(fetchData(-1)).rejects.toThrow('Invalid ID');\n });\n\n it('uses resolves matcher', async () => {\n await expect(fetchData(1)).resolves.toHaveProperty('id', 1);\n });\n\n it('tests multiple async operations', async () => {\n const [user, posts] = await Promise.all([\n fetchUser(1),\n fetchPosts(1),\n ]);\n\n expect(user.id).toBe(1);\n expect(posts).toHaveLength(expect.any(Number));\n });\n});\n```\n\n### Testing Callbacks\n\n```typescript\ndescribe('Callback Testing', () => {\n it('calls callback with correct arguments', (done) => {\n function fetchWithCallback(id: number, callback: (data: any) => void) {\n setTimeout(() => {\n callback({ id, name: 'Test' });\n }, 100);\n }\n\n fetchWithCallback(1, (data) => {\n try {\n expect(data.id).toBe(1);\n expect(data.name).toBe('Test');\n done();\n } catch (error) {\n done(error);\n }\n });\n });\n});\n```\n\n## Coverage Configuration\n\n### Advanced Coverage Setup\n\n**jest.config.ts**:\n```typescript\nconst config: Config = {\n collectCoverage: true,\n coverageDirectory: 'coverage',\n coverageProvider: 'v8', // or 'babel' for compatibility\n coverageReporters: ['text', 'lcov', 'html', 'json'],\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/**/*.d.ts',\n '!src/**/*.test.{ts,tsx}',\n '!src/**/__tests__/**',\n '!src/index.ts',\n '!src/types/**',\n ],\n coverageThreshold: {\n global: {\n branches: 80,\n functions: 80,\n lines: 80,\n statements: 80,\n },\n './src/core/': {\n branches: 90,\n functions: 90,\n lines: 90,\n statements: 90,\n },\n },\n coveragePathIgnorePatterns: [\n '/node_modules/',\n '/dist/',\n '/__tests__/',\n ],\n};\n```\n\n### Running Coverage\n\n```bash\n# Generate coverage report\nnpm test -- --coverage\n\n# Coverage with watch mode\nnpm test -- --coverage --watch\n\n# Coverage for specific files\nnpm test -- --coverage --collectCoverageFrom=\"src/components/**/*.tsx\"\n\n# View HTML report\nopen coverage/lcov-report/index.html\n```\n\n## Migration from Vitest\n\n### Key Differences\n\n**API Changes**:\n```typescript\n// Vitest\nimport { vi } from 'vitest';\nconst mockFn = vi.fn();\nvi.spyOn(obj, 'method');\n\n// Jest\nimport { jest } from '@jest/globals';\nconst mockFn = jest.fn();\njest.spyOn(obj, 'method');\n```\n\n### Migration Checklist\n\n**1. Update Dependencies**:\n```bash\nnpm uninstall vitest @vitest/ui\nnpm install -D jest @types/jest ts-jest\n```\n\n**2. Update package.json**:\n```json\n{\n \"scripts\": {\n \"test\": \"jest\", // Was: vitest run\n \"test:watch\": \"jest --watch\" // Was: vitest\n }\n}\n```\n\n**3. Replace vitest.config.ts with jest.config.ts**:\n```typescript\n// Old: vitest.config.ts\nimport { defineConfig } from 'vitest/config';\nexport default defineConfig({\n test: {\n globals: true,\n environment: 'jsdom',\n },\n});\n\n// New: jest.config.ts\nimport type { Config } from 'jest';\nconst config: Config = {\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n globals: {\n 'ts-jest': {\n isolatedModules: true,\n },\n },\n};\nexport default config;\n```\n\n**4. Update Test Files**:\n```typescript\n// Change imports\n- import { vi } from 'vitest';\n+ import { jest } from '@jest/globals';\n\n// Update mocks\n- vi.fn()\n+ jest.fn()\n\n- vi.spyOn()\n+ jest.spyOn()\n\n- vi.mock()\n+ jest.mock()\n\n// Timer mocks\n- vi.useFakeTimers()\n+ jest.useFakeTimers()\n\n- vi.advanceTimersByTime()\n+ jest.advanceTimersByTime()\n```\n\n**5. Update tsconfig.json**:\n```json\n{\n \"compilerOptions\": {\n \"types\": [\"jest\", \"@testing-library/jest-dom\"] // Was: vitest/globals\n }\n}\n```\n\n## Jest vs Vitest Comparison\n\n### Performance\n\n**Jest**:\n- Slower initial startup (no HMR)\n- Sequential test execution by default\n- 1-5 seconds for medium projects\n\n**Vitest**:\n- Instant HMR-based execution\n- Parallel by default\n- 100-500ms for same projects\n\n### Ecosystem\n\n**Jest**:\n- ✅ 70% market share\n- ✅ Mature ecosystem (8+ years)\n- ✅ More Stack Overflow answers\n- ✅ Better corporate support\n\n**Vitest**:\n- ✅ Modern, growing adoption\n- ✅ Vite-native integration\n- ⚠️ Smaller ecosystem\n- ⚠️ Fewer resources\n\n### TypeScript Support\n\n**Jest**:\n- Requires ts-jest configuration\n- Extra transform step\n- Slower compilation\n\n**Vitest**:\n- Built-in TypeScript support\n- No configuration needed\n- Faster through Vite\n\n### When to Use Jest\n\nChoose Jest for:\n- ✅ Existing projects already using Jest\n- ✅ Corporate environments requiring proven tools\n- ✅ Projects requiring extensive ecosystem support\n- ✅ React projects with Create React App\n- ✅ Non-Vite build systems (Webpack, Rollup)\n\nChoose Vitest for:\n- ✅ New projects with modern tooling\n- ✅ Vite-based applications\n- ✅ Performance-critical test suites\n- ✅ ESM-first projects\n\n## Best Practices\n\n1. **Use TypeScript Configuration**: Type-safe tests prevent runtime errors\n2. **Mock External Dependencies**: Network, file system, databases\n3. **Isolate Tests**: Each test should be independent\n4. **Use describe Blocks**: Group related tests logically\n5. **Clear Mock State**: Use `jest.clearAllMocks()` in `beforeEach`\n6. **Test Edge Cases**: Empty arrays, null, undefined, errors\n7. **Use .each for Data-Driven Tests**: Test multiple inputs efficiently\n8. **Avoid Testing Implementation**: Test behavior, not internal structure\n9. **Keep Tests Fast**: Mock slow operations, use parallel execution\n10. **Maintain Coverage Thresholds**: Enforce minimum coverage in CI\n\n## Common Pitfalls\n\n❌ **Not clearing mocks between tests**:\n```typescript\n// WRONG - mocks leak between tests\nit('test 1', () => {\n jest.spyOn(api, 'fetch');\n // No cleanup!\n});\n\n// CORRECT\nafterEach(() => {\n jest.restoreAllMocks();\n});\n```\n\n❌ **Forgetting to await async tests**:\n```typescript\n// WRONG - test completes before assertion\nit('fetches data', () => {\n fetchData().then(data => {\n expect(data).toBeDefined(); // Never runs!\n });\n});\n\n// CORRECT\nit('fetches data', async () => {\n const data = await fetchData();\n expect(data).toBeDefined();\n});\n```\n\n❌ **Using wrong test environment**:\n```typescript\n// WRONG - testing DOM without jsdom\n// jest.config.ts\ntestEnvironment: 'node', // Can't test React!\n\n// CORRECT\ntestEnvironment: 'jsdom',\n```\n\n❌ **Not using TypeScript types for mocks**:\n```typescript\n// WRONG - no type safety\nconst mockFn = jest.fn();\n\n// CORRECT\nconst mockFn = jest.fn\u003c(id: number) => Promise\u003cUser>>();\n```\n\n## Resources\n\n- **Documentation**: https://jestjs.io/docs/getting-started\n- **TypeScript Guide**: https://jestjs.io/docs/getting-started#using-typescript\n- **ts-jest**: https://kulshekhar.github.io/ts-jest/\n- **React Testing Library**: https://testing-library.com/docs/react-testing-library/intro/\n- **Jest DOM Matchers**: https://github.com/testing-library/jest-dom\n\n## Related Skills\n\nWhen using Jest, consider these complementary skills:\n\n- **typescript-core**: Advanced TypeScript patterns, tsconfig optimization, and type safety\n- **react**: React component testing patterns with Testing Library\n- **vitest**: Modern alternative with Vite-native performance and faster execution\n\n### Quick TypeScript Type Safety Reference (Inlined for Standalone Use)\n\n```typescript\n// Type-safe test helpers with generics\nfunction createMockUser\u003cT extends Partial\u003cUser>>(overrides: T): User & T {\n return {\n id: 1,\n name: 'Test User',\n email: '[email protected]',\n ...overrides\n };\n}\n\n// Usage with type inference\nconst adminUser = createMockUser({ role: 'admin' });\n// Type: User & { role: string }\n\n// Type-safe mock functions\nconst mockFetch = jest.fn\u003ctypeof fetch>();\nmockFetch.mockResolvedValue(new Response('{}'));\n\n// Const type parameters for literal types\nconst createConfig = \u003cconst T extends Record\u003cstring, unknown>>(config: T): T => config;\nconst testConfig = createConfig({ environment: 'test', debug: true });\n// Type: { environment: \"test\"; debug: true } (literals preserved)\n```\n\n### Quick React Testing Patterns (Inlined for Standalone Use)\n\n```typescript\n// React Testing Library with Jest\nimport { render, screen, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport '@testing-library/jest-dom';\n\n// Component testing pattern\ndescribe('UserProfile', () => {\n it('should display user information', () => {\n const user = { id: 1, name: 'Alice', email: '[email protected]' };\n render(\u003cUserProfile user={user} />);\n\n expect(screen.getByText('Alice')).toBeInTheDocument();\n expect(screen.getByText('[email protected]')).toBeInTheDocument();\n });\n\n it('should handle user interactions', async () => {\n const onSubmit = jest.fn();\n render(\u003cUserForm onSubmit={onSubmit} />);\n\n // User interactions\n await userEvent.type(screen.getByLabelText('Name'), 'Bob');\n await userEvent.click(screen.getByRole('button', { name: 'Submit' }));\n\n await waitFor(() => {\n expect(onSubmit).toHaveBeenCalledWith({ name: 'Bob' });\n });\n });\n});\n\n// Hook testing\nimport { renderHook, act } from '@testing-library/react';\n\ntest('useCounter hook', () => {\n const { result } = renderHook(() => useCounter(0));\n\n expect(result.current.count).toBe(0);\n\n act(() => {\n result.current.increment();\n });\n\n expect(result.current.count).toBe(1);\n});\n\n// Context and Provider testing\nconst wrapper = ({ children }: { children: React.ReactNode }) => (\n \u003cAuthProvider>{children}\u003c/AuthProvider>\n);\n\ntest('useAuth hook with context', () => {\n const { result } = renderHook(() => useAuth(), { wrapper });\n expect(result.current.user).toBeDefined();\n});\n```\n\n### Quick Vitest Comparison (Inlined for Standalone Use)\n\n**When to Choose Vitest over Jest:**\n- New Vite/Vite-based projects (Next.js with Turbopack, SvelteKit)\n- Need faster test execution (10-100x faster)\n- ESM-first architecture\n- Hot Module Replacement for tests\n\n**When to Stick with Jest:**\n- Existing large codebases with Jest already configured\n- Corporate environments with established Jest workflows\n- Need mature ecosystem and extensive plugins\n- React apps with Create React App (default Jest setup)\n\n**Migration Snippet (Jest → Vitest):**\n```typescript\n// Jest: import from '@testing-library/jest-dom'\nimport '@testing-library/jest-dom';\n\n// Vitest: import from vitest globals\nimport { expect, test, describe } from 'vitest';\nimport { screen } from '@testing-library/react';\n\n// Most Jest syntax works in Vitest unchanged\ntest('component renders', () => {\n render(\u003cComponent />);\n expect(screen.getByText('Hello')).toBeTruthy();\n});\n```\n\n[Full TypeScript, React, and Vitest patterns available in respective skills if deployed together]\n\n## Summary\n\n- **Jest** is the industry standard with 70% market share\n- **TypeScript support** via ts-jest with full type safety\n- **All-in-one solution**: Test runner, assertions, mocks, coverage\n- **React Testing Library** integration for component testing\n- **Mature ecosystem** with extensive tooling and support\n- **Snapshot testing** for UI regression testing\n- **Migration path** from Vitest with compatible API\n- **Perfect for**: Existing projects, corporate environments, React apps, legacy support\n- **Trade-off**: Slower than Vitest but more mature and widely supported\n---","attachment_filenames":["metadata.json"],"attachments":[{"filename":"metadata.json","content":"{\n \"name\": \"jest-typescript\",\n \"version\": \"1.0.0\",\n \"category\": \"toolchain\",\n \"toolchain\": \"typescript\",\n \"framework\": \"jest\",\n \"tags\": [\n \"testing\",\n \"jest\",\n \"typescript\",\n \"react-testing-library\"\n ],\n \"entry_point_tokens\": 75,\n \"full_tokens\": 6420,\n \"related_skills\": [\n \"../../typescript-core\",\n \"../../../javascript/frameworks/react\",\n \"../vitest\"\n ],\n \"author\": \"Claude MPM\",\n \"license\": \"MIT\"\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":436,"content_sha256":"ca3b4cfa1d08c728140d42ccd365a0ad12c82fba6290db370abd8c2c787ccc37"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Jest + TypeScript - Industry Standard Testing","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Jest is the industry-standard testing framework with 70% market share, providing a mature, battle-tested ecosystem for TypeScript projects. It offers comprehensive testing capabilities with built-in snapshot testing, mocking, and coverage reporting.","type":"text"}]},{"type":"paragraph","content":[{"text":"Key Features","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"🏆 ","type":"text"},{"text":"Industry Standard","type":"text","marks":[{"type":"strong"}]},{"text":": 70% market share, widely adopted","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"📦 ","type":"text"},{"text":"All-in-One","type":"text","marks":[{"type":"strong"}]},{"text":": Test runner, assertions, mocks, coverage in one package","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"📸 ","type":"text"},{"text":"Snapshot Testing","type":"text","marks":[{"type":"strong"}]},{"text":": Built-in snapshot support for UI testing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"🧪 ","type":"text"},{"text":"React Integration","type":"text","marks":[{"type":"strong"}]},{"text":": React Testing Library, enzyme compatibility","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"🔧 ","type":"text"},{"text":"Mature Ecosystem","type":"text","marks":[{"type":"strong"}]},{"text":": Extensive plugins, tooling, and community support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"🎯 ","type":"text"},{"text":"TypeScript Support","type":"text","marks":[{"type":"strong"}]},{"text":": Full type safety via ts-jest","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"🔍 ","type":"text"},{"text":"Coverage Reports","type":"text","marks":[{"type":"strong"}]},{"text":": Built-in Istanbul coverage","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"🌐 ","type":"text"},{"text":"Multi-Platform","type":"text","marks":[{"type":"strong"}]},{"text":": Node.js, browser (jsdom), React Native","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Installation","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"npm install -D jest @types/jest ts-jest\nnpm install -D @testing-library/react @testing-library/jest-dom # For React","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Basic Setup","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. Initialize Jest Configuration","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"npx ts-jest config:init","type":"text"}]},{"type":"paragraph","content":[{"text":"This creates ","type":"text"},{"text":"jest.config.js","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"javascript"},"content":[{"text":"module.exports = {\n preset: 'ts-jest',\n testEnvironment: 'node',\n};","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. Manual Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"jest.config.ts","type":"text","marks":[{"type":"strong"}]},{"text":" (TypeScript config):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import type { Config } from 'jest';\n\nconst config: Config = {\n preset: 'ts-jest',\n testEnvironment: 'node',\n roots: ['\u003crootDir>/src'],\n testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],\n moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/**/*.d.ts',\n '!src/**/*.test.{ts,tsx}',\n '!src/**/__tests__/**',\n ],\n coverageThreshold: {\n global: {\n branches: 80,\n functions: 80,\n lines: 80,\n statements: 80,\n },\n },\n};\n\nexport default config;","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. TypeScript Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"tsconfig.json","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"compilerOptions\": {\n \"types\": [\"jest\", \"@testing-library/jest-dom\"],\n \"esModuleInterop\": true\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"tsconfig.test.json","type":"text","marks":[{"type":"strong"}]},{"text":" (test-specific):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\", \"node\", \"@testing-library/jest-dom\"]\n },\n \"include\": [\"src/**/*.test.ts\", \"src/**/*.spec.ts\", \"src/**/__tests__/**\"]\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Package.json Scripts","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"jest --watch\",\n \"test:coverage\": \"jest --coverage\",\n \"test:ci\": \"jest --ci --coverage --maxWorkers=2\"\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Core Testing Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Test Structure","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';\n\ndescribe('Calculator', () => {\n let calculator: Calculator;\n\n beforeEach(() => {\n calculator = new Calculator();\n });\n\n afterEach(() => {\n // Cleanup\n });\n\n it('adds two numbers correctly', () => {\n const result = calculator.add(2, 3);\n expect(result).toBe(5);\n });\n\n it('handles negative numbers', () => {\n expect(calculator.add(-5, 3)).toBe(-2);\n });\n\n it.each([\n [1, 1, 2],\n [2, 3, 5],\n [10, -5, 5],\n ])('adds %i + %i to equal %i', (a, b, expected) => {\n expect(calculator.add(a, b)).toBe(expected);\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"TypeScript Type-Safe Tests","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"interface User {\n id: number;\n name: string;\n email: string;\n role: 'admin' | 'user';\n}\n\ndescribe('User Service', () => {\n it('creates user with correct types', () => {\n const user: User = {\n id: 1,\n name: 'Alice',\n email: '[email protected]',\n role: 'admin',\n };\n\n // Type-safe assertions\n expect(user.id).toEqual(expect.any(Number));\n expect(user.name).toEqual(expect.any(String));\n expect(user.role).toMatch(/^(admin|user)$/);\n });\n\n it('validates user object shape', () => {\n const user = createUser('Bob', '[email protected]');\n\n expect(user).toMatchObject({\n id: expect.any(Number),\n name: 'Bob',\n email: '[email protected]',\n });\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Mocking with TypeScript","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"jest.mock for Module Mocking","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { jest } from '@jest/globals';\nimport { UserService } from './UserService';\nimport * as userApi from './api/userApi';\n\n// Mock entire module\njest.mock('./api/userApi');\n\ndescribe('UserService with Mocks', () => {\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n it('fetches user data', async () => {\n const mockUser = { id: 1, name: 'Alice', email: '[email protected]' };\n\n // Type-safe mock\n const mockedFetchUser = jest.mocked(userApi.fetchUser);\n mockedFetchUser.mockResolvedValue(mockUser);\n\n const service = new UserService();\n const user = await service.getUser(1);\n\n expect(mockedFetchUser).toHaveBeenCalledWith(1);\n expect(user).toEqual(mockUser);\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"jest.spyOn for Method Spying","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { jest } from '@jest/globals';\n\nclass Logger {\n log(message: string): void {\n console.log(message);\n }\n\n error(message: string): void {\n console.error(message);\n }\n}\n\ndescribe('Logger Spy', () => {\n let logger: Logger;\n let logSpy: jest.SpyInstance;\n\n beforeEach(() => {\n logger = new Logger();\n logSpy = jest.spyOn(logger, 'log');\n });\n\n afterEach(() => {\n logSpy.mockRestore();\n });\n\n it('tracks method calls', () => {\n logger.log('Hello');\n logger.log('World');\n\n expect(logSpy).toHaveBeenCalledTimes(2);\n expect(logSpy).toHaveBeenCalledWith('Hello');\n expect(logSpy).toHaveBeenLastCalledWith('World');\n });\n\n it('provides custom implementation', () => {\n logSpy.mockImplementation((msg: string) => {\n console.log(`[CUSTOM] ${msg}`);\n });\n\n logger.log('Test');\n expect(logSpy).toHaveBeenCalledWith('Test');\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Type-Safe Mock Functions","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { jest } from '@jest/globals';\n\ninterface ApiResponse\u003cT> {\n data: T;\n status: number;\n}\n\ntype FetchUserFn = (id: number) => Promise\u003cApiResponse\u003cUser>>;\n\ndescribe('Type-Safe Mocks', () => {\n it('creates typed mock function', async () => {\n const mockFetchUser = jest.fn\u003cFetchUserFn>()\n .mockResolvedValue({\n data: { id: 1, name: 'Alice', email: '[email protected]', role: 'user' },\n status: 200,\n });\n\n const result = await mockFetchUser(1);\n\n expect(result.data.name).toBe('Alice');\n expect(result.status).toBe(200);\n expect(mockFetchUser).toHaveBeenCalledWith(1);\n });\n\n it('uses mock implementation', () => {\n const mockCalculate = jest.fn\u003c(x: number, y: number) => number>()\n .mockImplementation((x, y) => x + y);\n\n expect(mockCalculate(5, 3)).toBe(8);\n expect(mockCalculate).toHaveBeenCalledWith(5, 3);\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Mocking Timers","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { jest } from '@jest/globals';\n\ndescribe('Timer Mocking', () => {\n beforeEach(() => {\n jest.useFakeTimers();\n });\n\n afterEach(() => {\n jest.useRealTimers();\n });\n\n it('fast-forwards time', () => {\n const callback = jest.fn();\n setTimeout(callback, 1000);\n\n jest.advanceTimersByTime(500);\n expect(callback).not.toHaveBeenCalled();\n\n jest.advanceTimersByTime(500);\n expect(callback).toHaveBeenCalledTimes(1);\n });\n\n it('runs all timers', () => {\n const callback = jest.fn();\n setTimeout(callback, 1000);\n setTimeout(callback, 2000);\n\n jest.runAllTimers();\n expect(callback).toHaveBeenCalledTimes(2);\n });\n\n it('handles intervals', () => {\n const callback = jest.fn();\n setInterval(callback, 1000);\n\n jest.advanceTimersByTime(3500);\n expect(callback).toHaveBeenCalledTimes(3);\n\n jest.clearAllTimers();\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"React Testing Library + TypeScript","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Setup for React","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event\nnpm install -D jest-environment-jsdom","type":"text"}]},{"type":"paragraph","content":[{"text":"jest.config.ts","type":"text","marks":[{"type":"strong"}]},{"text":" (React):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import type { Config } from 'jest';\n\nconst config: Config = {\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n setupFilesAfterEnv: ['\u003crootDir>/src/test/setup.ts'],\n moduleNameMapper: {\n '\\\\.(css|less|scss|sass)

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

: 'identity-obj-proxy',\n '\\\\.(jpg|jpeg|png|gif|svg)

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

: '\u003crootDir>/__mocks__/fileMock.js',\n },\n transform: {\n '^.+\\\\.tsx?

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

: ['ts-jest', {\n tsconfig: {\n jsx: 'react-jsx',\n },\n }],\n },\n};\n\nexport default config;","type":"text"}]},{"type":"paragraph","content":[{"text":"src/test/setup.ts","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import '@testing-library/jest-dom';\nimport { cleanup } from '@testing-library/react';\nimport { afterEach } from '@jest/globals';\n\nafterEach(() => {\n cleanup();\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"React Component Testing","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { Counter } from './Counter';\n\ndescribe('Counter Component', () => {\n it('renders initial count', () => {\n render(\u003cCounter initialCount={0} />);\n expect(screen.getByText('Count: 0')).toBeInTheDocument();\n });\n\n it('increments counter on button click', async () => {\n const user = userEvent.setup();\n render(\u003cCounter initialCount={0} />);\n\n const button = screen.getByRole('button', { name: /increment/i });\n await user.click(button);\n\n expect(screen.getByText('Count: 1')).toBeInTheDocument();\n });\n\n it('calls onChange callback with correct value', async () => {\n const onChange = jest.fn();\n const user = userEvent.setup();\n\n render(\u003cCounter initialCount={5} onChange={onChange} />);\n\n await user.click(screen.getByRole('button', { name: /increment/i }));\n\n expect(onChange).toHaveBeenCalledWith(6);\n expect(onChange).toHaveBeenCalledTimes(1);\n });\n\n it('disables button when max count reached', () => {\n render(\u003cCounter initialCount={10} maxCount={10} />);\n\n const button = screen.getByRole('button', { name: /increment/i });\n expect(button).toBeDisabled();\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing Hooks","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { renderHook, act } from '@testing-library/react';\nimport { useCounter } from './useCounter';\n\ndescribe('useCounter Hook', () => {\n it('initializes with default value', () => {\n const { result } = renderHook(() => useCounter(0));\n expect(result.current.count).toBe(0);\n });\n\n it('increments counter', () => {\n const { result } = renderHook(() => useCounter(0));\n\n act(() => {\n result.current.increment();\n });\n\n expect(result.current.count).toBe(1);\n });\n\n it('decrements counter', () => {\n const { result } = renderHook(() => useCounter(5));\n\n act(() => {\n result.current.decrement();\n });\n\n expect(result.current.count).toBe(4);\n });\n\n it('resets to initial value', () => {\n const { result } = renderHook(() => useCounter(10));\n\n act(() => {\n result.current.increment();\n result.current.increment();\n });\n\n expect(result.current.count).toBe(12);\n\n act(() => {\n result.current.reset();\n });\n\n expect(result.current.count).toBe(10);\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing Async Components","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UserProfile } from './UserProfile';\nimport * as api from './api';\n\njest.mock('./api');\n\ndescribe('UserProfile Async', () => {\n it('loads and displays user data', async () => {\n const mockUser = { id: 1, name: 'Alice', email: '[email protected]' };\n jest.mocked(api.fetchUser).mockResolvedValue(mockUser);\n\n render(\u003cUserProfile userId={1} />);\n\n expect(screen.getByText('Loading...')).toBeInTheDocument();\n\n await waitFor(() => {\n expect(screen.getByText('Alice')).toBeInTheDocument();\n });\n\n expect(screen.getByText('[email protected]')).toBeInTheDocument();\n });\n\n it('displays error on fetch failure', async () => {\n jest.mocked(api.fetchUser).mockRejectedValue(new Error('Network error'));\n\n render(\u003cUserProfile userId={1} />);\n\n await waitFor(() => {\n expect(screen.getByText(/error/i)).toBeInTheDocument();\n });\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Snapshot Testing","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Component Snapshots","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { render } from '@testing-library/react';\nimport { UserCard } from './UserCard';\n\ndescribe('UserCard Snapshots', () => {\n it('matches snapshot for regular user', () => {\n const { container } = render(\n \u003cUserCard\n name=\"Alice\"\n email=\"[email protected]\"\n role=\"user\"\n />\n );\n\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('matches snapshot for admin user', () => {\n const { container } = render(\n \u003cUserCard\n name=\"Bob\"\n email=\"[email protected]\"\n role=\"admin\"\n />\n );\n\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('uses inline snapshot', () => {\n const user = { id: 1, name: 'Charlie', role: 'user' };\n\n expect(user).toMatchInlineSnapshot(`\n {\n \"id\": 1,\n \"name\": \"Charlie\",\n \"role\": \"user\",\n }\n `);\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Updating Snapshots","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Update all snapshots\njest --updateSnapshot\njest -u\n\n# Update snapshots for specific test file\njest UserCard.test.tsx -u\n\n# Interactive snapshot update\njest --watch\n# Press 'u' to update failing snapshots","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Custom Snapshot Serializers","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// __tests__/serializers/dateSerializer.ts\nexport default {\n test: (val: any) => val instanceof Date,\n print: (val: Date) => `Date(${val.toISOString()})`,\n};","type":"text"}]},{"type":"paragraph","content":[{"text":"jest.config.ts","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"const config: Config = {\n snapshotSerializers: ['\u003crootDir>/__tests__/serializers/dateSerializer.ts'],\n};","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Async Testing","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing Promises","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { fetchData, saveData } from './api';\n\ndescribe('Async Operations', () => {\n it('resolves with data', async () => {\n const data = await fetchData(1);\n expect(data).toBeDefined();\n expect(data.id).toBe(1);\n });\n\n it('handles promise rejection', async () => {\n await expect(fetchData(-1)).rejects.toThrow('Invalid ID');\n });\n\n it('uses resolves matcher', async () => {\n await expect(fetchData(1)).resolves.toHaveProperty('id', 1);\n });\n\n it('tests multiple async operations', async () => {\n const [user, posts] = await Promise.all([\n fetchUser(1),\n fetchPosts(1),\n ]);\n\n expect(user.id).toBe(1);\n expect(posts).toHaveLength(expect.any(Number));\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing Callbacks","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"describe('Callback Testing', () => {\n it('calls callback with correct arguments', (done) => {\n function fetchWithCallback(id: number, callback: (data: any) => void) {\n setTimeout(() => {\n callback({ id, name: 'Test' });\n }, 100);\n }\n\n fetchWithCallback(1, (data) => {\n try {\n expect(data.id).toBe(1);\n expect(data.name).toBe('Test');\n done();\n } catch (error) {\n done(error);\n }\n });\n });\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Coverage Configuration","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advanced Coverage Setup","type":"text"}]},{"type":"paragraph","content":[{"text":"jest.config.ts","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"const config: Config = {\n collectCoverage: true,\n coverageDirectory: 'coverage',\n coverageProvider: 'v8', // or 'babel' for compatibility\n coverageReporters: ['text', 'lcov', 'html', 'json'],\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/**/*.d.ts',\n '!src/**/*.test.{ts,tsx}',\n '!src/**/__tests__/**',\n '!src/index.ts',\n '!src/types/**',\n ],\n coverageThreshold: {\n global: {\n branches: 80,\n functions: 80,\n lines: 80,\n statements: 80,\n },\n './src/core/': {\n branches: 90,\n functions: 90,\n lines: 90,\n statements: 90,\n },\n },\n coveragePathIgnorePatterns: [\n '/node_modules/',\n '/dist/',\n '/__tests__/',\n ],\n};","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Running Coverage","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Generate coverage report\nnpm test -- --coverage\n\n# Coverage with watch mode\nnpm test -- --coverage --watch\n\n# Coverage for specific files\nnpm test -- --coverage --collectCoverageFrom=\"src/components/**/*.tsx\"\n\n# View HTML report\nopen coverage/lcov-report/index.html","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Migration from Vitest","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Key Differences","type":"text"}]},{"type":"paragraph","content":[{"text":"API Changes","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Vitest\nimport { vi } from 'vitest';\nconst mockFn = vi.fn();\nvi.spyOn(obj, 'method');\n\n// Jest\nimport { jest } from '@jest/globals';\nconst mockFn = jest.fn();\njest.spyOn(obj, 'method');","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Migration Checklist","type":"text"}]},{"type":"paragraph","content":[{"text":"1. Update Dependencies","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"npm uninstall vitest @vitest/ui\nnpm install -D jest @types/jest ts-jest","type":"text"}]},{"type":"paragraph","content":[{"text":"2. Update package.json","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"scripts\": {\n \"test\": \"jest\", // Was: vitest run\n \"test:watch\": \"jest --watch\" // Was: vitest\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"3. Replace vitest.config.ts with jest.config.ts","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Old: vitest.config.ts\nimport { defineConfig } from 'vitest/config';\nexport default defineConfig({\n test: {\n globals: true,\n environment: 'jsdom',\n },\n});\n\n// New: jest.config.ts\nimport type { Config } from 'jest';\nconst config: Config = {\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n globals: {\n 'ts-jest': {\n isolatedModules: true,\n },\n },\n};\nexport default config;","type":"text"}]},{"type":"paragraph","content":[{"text":"4. Update Test Files","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Change imports\n- import { vi } from 'vitest';\n+ import { jest } from '@jest/globals';\n\n// Update mocks\n- vi.fn()\n+ jest.fn()\n\n- vi.spyOn()\n+ jest.spyOn()\n\n- vi.mock()\n+ jest.mock()\n\n// Timer mocks\n- vi.useFakeTimers()\n+ jest.useFakeTimers()\n\n- vi.advanceTimersByTime()\n+ jest.advanceTimersByTime()","type":"text"}]},{"type":"paragraph","content":[{"text":"5. Update tsconfig.json","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"compilerOptions\": {\n \"types\": [\"jest\", \"@testing-library/jest-dom\"] // Was: vitest/globals\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Jest vs Vitest Comparison","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Performance","type":"text"}]},{"type":"paragraph","content":[{"text":"Jest","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Slower initial startup (no HMR)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Sequential test execution by default","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"1-5 seconds for medium projects","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Vitest","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Instant HMR-based execution","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Parallel by default","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"100-500ms for same projects","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Ecosystem","type":"text"}]},{"type":"paragraph","content":[{"text":"Jest","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ 70% market share","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Mature ecosystem (8+ years)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ More Stack Overflow answers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Better corporate support","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Vitest","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Modern, growing adoption","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Vite-native integration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"⚠️ Smaller ecosystem","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"⚠️ Fewer resources","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"TypeScript Support","type":"text"}]},{"type":"paragraph","content":[{"text":"Jest","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Requires ts-jest configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Extra transform step","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Slower compilation","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Vitest","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Built-in TypeScript support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"No configuration needed","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Faster through Vite","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"When to Use Jest","type":"text"}]},{"type":"paragraph","content":[{"text":"Choose Jest for:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Existing projects already using Jest","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Corporate environments requiring proven tools","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Projects requiring extensive ecosystem support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ React projects with Create React App","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Non-Vite build systems (Webpack, Rollup)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Choose Vitest for:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ New projects with modern tooling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Vite-based applications","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ Performance-critical test suites","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"✅ ESM-first projects","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Best Practices","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use TypeScript Configuration","type":"text","marks":[{"type":"strong"}]},{"text":": Type-safe tests prevent runtime errors","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Mock External Dependencies","type":"text","marks":[{"type":"strong"}]},{"text":": Network, file system, databases","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Isolate Tests","type":"text","marks":[{"type":"strong"}]},{"text":": Each test should be independent","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use describe Blocks","type":"text","marks":[{"type":"strong"}]},{"text":": Group related tests logically","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Clear Mock State","type":"text","marks":[{"type":"strong"}]},{"text":": Use ","type":"text"},{"text":"jest.clearAllMocks()","type":"text","marks":[{"type":"code_inline"}]},{"text":" in ","type":"text"},{"text":"beforeEach","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Test Edge Cases","type":"text","marks":[{"type":"strong"}]},{"text":": Empty arrays, null, undefined, errors","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use .each for Data-Driven Tests","type":"text","marks":[{"type":"strong"}]},{"text":": Test multiple inputs efficiently","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Avoid Testing Implementation","type":"text","marks":[{"type":"strong"}]},{"text":": Test behavior, not internal structure","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keep Tests Fast","type":"text","marks":[{"type":"strong"}]},{"text":": Mock slow operations, use parallel execution","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Maintain Coverage Thresholds","type":"text","marks":[{"type":"strong"}]},{"text":": Enforce minimum coverage in CI","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Pitfalls","type":"text"}]},{"type":"paragraph","content":[{"text":"❌ ","type":"text"},{"text":"Not clearing mocks between tests","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// WRONG - mocks leak between tests\nit('test 1', () => {\n jest.spyOn(api, 'fetch');\n // No cleanup!\n});\n\n// CORRECT\nafterEach(() => {\n jest.restoreAllMocks();\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"❌ ","type":"text"},{"text":"Forgetting to await async tests","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// WRONG - test completes before assertion\nit('fetches data', () => {\n fetchData().then(data => {\n expect(data).toBeDefined(); // Never runs!\n });\n});\n\n// CORRECT\nit('fetches data', async () => {\n const data = await fetchData();\n expect(data).toBeDefined();\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"❌ ","type":"text"},{"text":"Using wrong test environment","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// WRONG - testing DOM without jsdom\n// jest.config.ts\ntestEnvironment: 'node', // Can't test React!\n\n// CORRECT\ntestEnvironment: 'jsdom',","type":"text"}]},{"type":"paragraph","content":[{"text":"❌ ","type":"text"},{"text":"Not using TypeScript types for mocks","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// WRONG - no type safety\nconst mockFn = jest.fn();\n\n// CORRECT\nconst mockFn = jest.fn\u003c(id: number) => Promise\u003cUser>>();","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Resources","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Documentation","type":"text","marks":[{"type":"strong"}]},{"text":": https://jestjs.io/docs/getting-started","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"TypeScript Guide","type":"text","marks":[{"type":"strong"}]},{"text":": https://jestjs.io/docs/getting-started#using-typescript","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ts-jest","type":"text","marks":[{"type":"strong"}]},{"text":": https://kulshekhar.github.io/ts-jest/","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"React Testing Library","type":"text","marks":[{"type":"strong"}]},{"text":": https://testing-library.com/docs/react-testing-library/intro/","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Jest DOM Matchers","type":"text","marks":[{"type":"strong"}]},{"text":": https://github.com/testing-library/jest-dom","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Related Skills","type":"text"}]},{"type":"paragraph","content":[{"text":"When using Jest, consider these complementary skills:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"typescript-core","type":"text","marks":[{"type":"strong"}]},{"text":": Advanced TypeScript patterns, tsconfig optimization, and type safety","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"react","type":"text","marks":[{"type":"strong"}]},{"text":": React component testing patterns with Testing Library","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"vitest","type":"text","marks":[{"type":"strong"}]},{"text":": Modern alternative with Vite-native performance and faster execution","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Quick TypeScript Type Safety Reference (Inlined for Standalone Use)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Type-safe test helpers with generics\nfunction createMockUser\u003cT extends Partial\u003cUser>>(overrides: T): User & T {\n return {\n id: 1,\n name: 'Test User',\n email: '[email protected]',\n ...overrides\n };\n}\n\n// Usage with type inference\nconst adminUser = createMockUser({ role: 'admin' });\n// Type: User & { role: string }\n\n// Type-safe mock functions\nconst mockFetch = jest.fn\u003ctypeof fetch>();\nmockFetch.mockResolvedValue(new Response('{}'));\n\n// Const type parameters for literal types\nconst createConfig = \u003cconst T extends Record\u003cstring, unknown>>(config: T): T => config;\nconst testConfig = createConfig({ environment: 'test', debug: true });\n// Type: { environment: \"test\"; debug: true } (literals preserved)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Quick React Testing Patterns (Inlined for Standalone Use)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// React Testing Library with Jest\nimport { render, screen, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport '@testing-library/jest-dom';\n\n// Component testing pattern\ndescribe('UserProfile', () => {\n it('should display user information', () => {\n const user = { id: 1, name: 'Alice', email: '[email protected]' };\n render(\u003cUserProfile user={user} />);\n\n expect(screen.getByText('Alice')).toBeInTheDocument();\n expect(screen.getByText('[email protected]')).toBeInTheDocument();\n });\n\n it('should handle user interactions', async () => {\n const onSubmit = jest.fn();\n render(\u003cUserForm onSubmit={onSubmit} />);\n\n // User interactions\n await userEvent.type(screen.getByLabelText('Name'), 'Bob');\n await userEvent.click(screen.getByRole('button', { name: 'Submit' }));\n\n await waitFor(() => {\n expect(onSubmit).toHaveBeenCalledWith({ name: 'Bob' });\n });\n });\n});\n\n// Hook testing\nimport { renderHook, act } from '@testing-library/react';\n\ntest('useCounter hook', () => {\n const { result } = renderHook(() => useCounter(0));\n\n expect(result.current.count).toBe(0);\n\n act(() => {\n result.current.increment();\n });\n\n expect(result.current.count).toBe(1);\n});\n\n// Context and Provider testing\nconst wrapper = ({ children }: { children: React.ReactNode }) => (\n \u003cAuthProvider>{children}\u003c/AuthProvider>\n);\n\ntest('useAuth hook with context', () => {\n const { result } = renderHook(() => useAuth(), { wrapper });\n expect(result.current.user).toBeDefined();\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Quick Vitest Comparison (Inlined for Standalone Use)","type":"text"}]},{"type":"paragraph","content":[{"text":"When to Choose Vitest over Jest:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"New Vite/Vite-based projects (Next.js with Turbopack, SvelteKit)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Need faster test execution (10-100x faster)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ESM-first architecture","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Hot Module Replacement for tests","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to Stick with Jest:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Existing large codebases with Jest already configured","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Corporate environments with established Jest workflows","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Need mature ecosystem and extensive plugins","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"React apps with Create React App (default Jest setup)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Migration Snippet (Jest → Vitest):","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Jest: import from '@testing-library/jest-dom'\nimport '@testing-library/jest-dom';\n\n// Vitest: import from vitest globals\nimport { expect, test, describe } from 'vitest';\nimport { screen } from '@testing-library/react';\n\n// Most Jest syntax works in Vitest unchanged\ntest('component renders', () => {\n render(\u003cComponent />);\n expect(screen.getByText('Hello')).toBeTruthy();\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"[Full TypeScript, React, and Vitest patterns available in respective skills if deployed together]","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Summary","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Jest","type":"text","marks":[{"type":"strong"}]},{"text":" is the industry standard with 70% market share","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"TypeScript support","type":"text","marks":[{"type":"strong"}]},{"text":" via ts-jest with full type safety","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"All-in-one solution","type":"text","marks":[{"type":"strong"}]},{"text":": Test runner, assertions, mocks, coverage","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"React Testing Library","type":"text","marks":[{"type":"strong"}]},{"text":" integration for component testing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Mature ecosystem","type":"text","marks":[{"type":"strong"}]},{"text":" with extensive tooling and support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Snapshot testing","type":"text","marks":[{"type":"strong"}]},{"text":" for UI regression testing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Migration path","type":"text","marks":[{"type":"strong"}]},{"text":" from Vitest with compatible API","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Perfect for","type":"text","marks":[{"type":"strong"}]},{"text":": Existing projects, corporate environments, React apps, legacy support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trade-off","type":"text","marks":[{"type":"strong"}]},{"text":": Slower than Vitest but more mature and widely supported","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}}]},"metadata":{"date":"2026-06-05","name":"jest-typescript","tags":["testing","jest","typescript","react-testing-library","legacy"],"author":"@skillopedia","source":{"stars":49,"repo_name":"claude-mpm-skills","origin_url":"https://github.com/bobmatnyc/claude-mpm-skills/blob/HEAD/toolchains/typescript/testing/jest/SKILL.md","repo_owner":"bobmatnyc","body_sha256":"a19566e900c4e019e068f43be0999f5c07f46c037fc7ead0cea23cd9594199c1","cluster_key":"b8cac2f648cb431b7a3aaadb0ca283dbaca5e71cbd41de45d3ae84f202746742","clean_bundle":{"format":"clean-skill-bundle-v1","source":"bobmatnyc/claude-mpm-skills/toolchains/typescript/testing/jest/SKILL.md","attachments":[{"id":"8e60efed-c5bd-5194-9199-6565608cc384","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/8e60efed-c5bd-5194-9199-6565608cc384/attachment.json","path":"metadata.json","size":436,"sha256":"ca3b4cfa1d08c728140d42ccd365a0ad12c82fba6290db370abd8c2c787ccc37","contentType":"application/json; charset=utf-8"}],"bundle_sha256":"ee30b9b1cbc6aac020ea670c2473be21b32312ba5921532e819408eb83dad226","attachment_count":1,"text_attachments":1,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"toolchains/typescript/testing/jest/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"testing-qa","category_label":"Testing"},"exact_dupes_collapsed_into_this":0},"license":"MIT","version":"v1","category":"testing-qa","import_tag":"clean-skills-v1","description":"Jest with TypeScript - Industry standard testing framework with 70% market share, mature ecosystem, React Testing Library integration","context_limit":700,"requires_tools":[],"user-invocable":false,"progressive_disclosure":{"entry_point":{"summary":"TypeScript testing with Jest - industry standard testing framework with mature ecosystem, React Testing Library, snapshot testing, built-in coverage","quick_start":"1. npm install -D jest @types/jest ts-jest 2. npx ts-jest config:init 3. Create *.test.ts files 4. npm test","when_to_use":"Testing existing Jest projects, React/Node.js with TypeScript, using Jest ecosystem tools, migrating from JavaScript to TypeScript, legacy project support"}},"disable-model-invocation":true}},"renderedAt":1782980127884}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.