javascript-typescript-jest

작성자: github

Jest 테스트 모범 사례로, JavaScript 및 TypeScript 프로젝트에서 모킹, 비동기 처리, React 패턴을 다룹니다. 중첩된 describe 블록에서 설명적인 이름으로 테스트를 구성하고, .test.ts / .test.js 파일을 소스 코드 옆이나 __tests__ 디렉토리에 배치합니다. jest.mock(), jest.spyOn(), mockImplementation()으로 외부 의존성을 모킹하고, 테스트 간에 리셋하여 상태 누출을 방지합니다. 프로미스, async/await, resolves/rejects 매처로 비동기 코드를 처리하며, 설정...

npx skills add https://github.com/github/awesome-copilot --skill 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)

github의 다른 스킬

console-rendering
github
Go에서 struct 태그 기반 콘솔 렌더링 시스템 사용 지침
official
acquire-codebase-knowledge
github
사용자가 기존 코드베이스에 대한 매핑, 문서화, 또는 온보딩을 명시적으로 요청할 때 이 스킬을 사용하세요. "이 코드베이스를 매핑해줘", "문서화해줘"와 같은 프롬프트에서 트리거됩니다.
official
acreadiness-assess
github
현재 리포
official
acreadiness-generate-instructions
github
AgentRC 명령어를 통해 맞춤형 AI 에이전트 지침 파일을 생성합니다. .github/copilot-instructions.md 파일을 생성합니다(기본값, VS Code의 Copilot에 권장됨).
official
acreadiness-policy
github
사용자가 AgentRC 정책을 선택, 작성 또는 적용할 수 있도록 지원합니다. 정책은 관련 없는 검사를 비활성화하고, 영향/수준을 재정의하며, 설정을 통해 준비 상태 점수를 사용자 지정합니다.
official
add-educational-comments
github
코드 파일에 교육용 주석을 추가하여 효과적인 학습 자료로 변환합니다. 설명의 깊이와 어조를 세 가지 설정 가능한 지식 수준(초급, 중급, 고급)에 맞게 조정합니다. 파일이 제공되지 않으면 자동으로 요청하며, 빠른 선택을 위해 번호 목록 매칭을 제공합니다. 교육용 주석만을 사용하여 파일을 최대 125%까지 확장합니다(엄격한 제한: 새 줄 400개, 1,000줄 초과 파일의 경우 300개). 파일 인코딩, 들여쓰기 스타일, 구문 정확성 등을 유지합니다.
official
adobe-illustrator-scripting
github
Adobe Illustrator 자동화 스크립트를 ExtendScript(JavaScript/JSX)로 작성, 디버깅 및 최적화합니다. 스크립트를 생성하거나 수정하여 조작할 때 사용합니다.
official
agent-governance
github
선언적 정책, 의도 분류, AI 에이전트 도구 접근 및 행동 제어를 위한 감사 추적. 구성 가능한 거버넌스 정책은 허용/차단된 도구, 콘텐츠 필터, 속도 제한, 승인 요구 사항을 정의하며, 코드가 아닌 구성으로 저장됨. 의미론적 의도 분류는 패턴 기반 신호를 사용하여 도구 실행 전에 위험한 프롬프트(데이터 유출, 권한 상승, 프롬프트 인젝션)를 탐지함. 도구 수준 거버넌스 데코레이터는 함수에서 정책을 적용함...
official