Coding & Refactoringlow risk

javascript-typescript-jest

Best practices for writing JavaScript/TypeScript tests using Jest, including mocking strategies, test structure, and common patterns.

github/awesome-copilot·skills/javascript-typescript-jest/SKILL.md
100/ 100品質分

匯入這個 Skill

選擇你的 coding agent,複製專案級或個人級安裝指令。

固定至平台收錄的 commit
匯入目前專案.agents/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a codex -y
匯入個人環境~/.agents/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a codex -g -y
手動放置目錄.agents/skills/javascript-typescript-jestOfficial docs ↗
匯入目前專案.claude/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a claude-code -y
匯入個人環境~/.claude/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a claude-code -g -y
手動放置目錄.claude/skills/javascript-typescript-jestOfficial docs ↗
匯入目前專案.agents/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a github-copilot -y
匯入個人環境~/.copilot/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a github-copilot -g -y
手動放置目錄.agents/skills/javascript-typescript-jestOfficial docs ↗
匯入目前專案.agents/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a cursor -y
匯入個人環境~/.cursor/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a cursor -g -y
手動放置目錄.agents/skills/javascript-typescript-jestOfficial docs ↗
匯入目前專案.agents/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a gemini-cli -y
匯入個人環境~/.gemini/skills/javascript-typescript-jest
npx skills add https://github.com/github/awesome-copilot/tree/0aaced533251f5b86c69dfbc5e55db74c4b4d1af/skills/javascript-typescript-jest -a gemini-cli -g -y
Native Gemini CLIgemini skills install https://github.com/github/awesome-copilot.git --scope workspace --path skills/javascript-typescript-jest
手動放置目錄.agents/skills/javascript-typescript-jestOfficial docs ↗
⚠ 安裝指令使用開源 skills CLI。執行前請檢查來源、腳本與權限。
### 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)`