javascript-typescript-jest

Test Structure

• Name test files with .test.ts or .test.js suffix
• Jest by default also picks up files with a spec suffix, including React component files; TypeScript tests also need a transform configured for Jest
• Place test files next to the code they test or in a dedicated __tests__ directory
• Use descriptive test names that explain the expected behavior
• Use nested describe blocks to organize related tests
• Follow the pattern: describe('Component/Function/Class', () => { it('should do something', () => {}) })

Effective Mocking

• Mock external dependencies (APIs, databases, etc.) to isolate your tests
• Use jest.mock() for module-level mocks
• Use jest.spyOn() for specific function mocks
• Use mockImplementation() or mockReturnValue() to define mock behavior
• Reset mocks between tests with jest.resetAllMocks() in afterEach and also restore the original functions replaced by jest.spyOn() because resetting does not restore them
• Resetting also removes implementations set with mockImplementation() or inside jest.mock() factories, so apply them again before each test, or clear only call history when those implementations must persist

Testing Async Code

• Always return promises or use async/await syntax in tests
• Use resolves/rejects matchers for promises
• For individual slow tests, prefer passing a timeout argument to that test, since jest.setTimeout() applies to the whole test file

Snapshot Testing

• Use snapshot tests for UI components or complex objects that change infrequently
• Keep snapshots small and focused
• Review snapshot changes carefully before committing
• Use fixture data in snapshots and replace credentials, tokens, personal data, and volatile fields with property matchers before committing snapshots

Testing React Components

• Use React Testing Library over Enzyme for testing components
• Test user behavior and component accessibility
• Query elements by accessibility roles, labels, or text content
• Use userEvent over fireEvent for more realistic user interactions
• Recent versions of userEvent are async, so set up a user instance and await each interaction to avoid flaky tests

Common Jest Matchers

• Basic: expect(value).toBe(expected), expect(value).toEqual(expected)
• Truthiness: expect(value).toBeTruthy(), expect(value).toBeFalsy()
• Numbers: expect(value).toBeGreaterThan(3), expect(value).toBeLessThanOrEqual(3)
• Strings: expect(value).toMatch(/pattern/), expect(value).toContain('substring')
• Arrays: expect(array).toContain(item), expect(array).toHaveLength(3)
• Objects: expect(object).toHaveProperty('key', value)
• Exceptions: expect(fn).toThrow(), expect(fn).toThrow(Error)
• Mock functions: expect(mockFn).toHaveBeenCalled(), expect(mockFn).toHaveBeenCalledWith(arg1, arg2)