dhaim-svg/javascript-typescript-jest

Test Structure

• Name test files with .test.ts or .test.js suffix
• 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

Testing Async Code

• Always return promises or use async/await syntax in tests
• Use resolves/rejects matchers for promises
• Set appropriate timeouts for slow tests with jest.setTimeout()

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

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

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)