javascript-typescript-jest

github/awesome-copilot

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

Source View on skills.sh

What is javascript-typescript-jest?

This skill provides guidance on writing effective Jest tests for JavaScript and TypeScript projects. It covers test organization, mocking strategies, async testing, snapshot testing, React component testing, and common Jest matchers to help you write maintainable and reliable test suites.

Organize tests with descriptive names and nested describe blocks
Mock external dependencies using jest.mock(), jest.spyOn(), and mock implementations
Test asynchronous code with promises, async/await, and appropriate timeouts
Create snapshot tests for UI components and complex objects
Test React components using React Testing Library with accessibility-focused queries
Apply Jest matchers for assertions on values, arrays, objects, exceptions, and mock functions

How to install javascript-typescript-jest

npx skills add https://github.com/github/awesome-copilot --skill javascript-typescript-jest

Claude Code

Cursor

Windsurf

Cline

How to use javascript-typescript-jest

1.Name test files with .test.ts or .test.js suffix and place them next to source code or in __tests__ directories
2.Use describe() blocks to organize related tests and it() for individual test cases with descriptive names
3.Mock external dependencies with jest.mock() for modules or jest.spyOn() for specific functions, resetting with jest.resetAllMocks() in afterEach
4.Handle async code by returning promises or using async/await, with resolves/rejects matchers for promise assertions
5.Use React Testing Library to query elements by accessibility roles, labels, or text content instead of implementation details
6.Apply appropriate Jest matchers (toBe, toEqual, toHaveBeenCalled, toThrow, etc.) based on what you're asserting

Use cases

Good for

Writing unit tests for JavaScript/TypeScript functions and classes
Mocking APIs and databases to isolate component tests
Testing React component behavior and accessibility
Verifying async operations complete correctly with proper error handling
Creating snapshot tests for UI components to catch unintended changes

Who it's for

Frontend developers writing React component tests
Backend developers testing Node.js services and utilities
Full-stack developers maintaining JavaScript/TypeScript test suites
QA engineers automating test coverage for web applications

javascript-typescript-jest FAQ

When should I use snapshot testing?

Use snapshot tests for UI components or complex objects that change infrequently. Keep snapshots small and focused, and review snapshot changes carefully before committing.

What's the difference between jest.mock() and jest.spyOn()?

jest.mock() replaces an entire module with a mock at the module level, while jest.spyOn() creates a spy on a specific function, allowing you to track calls while optionally preserving the original implementation.

Should I use fireEvent or userEvent for React testing?

Use userEvent over fireEvent for more realistic user interactions that better simulate how users actually interact with your components.

How do I test React components effectively?

Use React Testing Library to test user behavior and accessibility. Query elements by accessibility roles, labels, or text content rather than implementation details like class names or IDs.

What timeout should I set for slow tests?

Use jest.setTimeout() to set appropriate timeouts for slow tests. The default is 5000ms, but adjust based on your test's actual needs.

Full instructions (SKILL.md)

Source of truth, from github/awesome-copilot.

name: javascript-typescript-jest description: 'Best practices for writing JavaScript/TypeScript tests using Jest, including mocking strategies, test structure, and common patterns.'

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)

Surgical code refactoring to improve maintainability without changing behavior.

19k installsAudited