界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
开发与工程 · SKILL.md

jest-skill

jest-skill

【开发与工程】Generates Jest unit and integration tests in JavaScript or TypeScript. Covers mocking, snapshots, async testing, and React component testing. Use when user mentions "Jest", "describe/it/expect", "jest.mock", "toMatchSnapshot". Triggers on: "Jest", "expect().toBe()", "jest.mock", "snapshot test", "JS test", "React test".

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: jest-skill description: > Generates Jest unit and integration tests in JavaScript or TypeScript. Covers mocking, snapshots, async testing, and React component testing. Use when user mentions "Jest", "describe/it/expect", "jest.mock", "toMatchSnapshot". Triggers on: "Jest", "expect().toBe()", "jest.mock", "snapshot test", "JS test", "React test". languages:

  • JavaScript
  • TypeScript category: unit-testing license: MIT metadata: author: TestMu AI version: "1.0"

Jest Testing Skill

Core Patterns

Basic Test

describe('Calculator', () => {
  let calc;
  beforeEach(() => { calc = new Calculator(); });

  test('adds two numbers', () => {
    expect(calc.add(2, 3)).toBe(5);
  });

  test('throws on division by zero', () => {
    expect(() => calc.divide(10, 0)).toThrow('Division by zero');
  });
});

Matchers

expect(value).toBe(exact);                 // === strict
expect(value).toEqual(object);             // deep equality
expect(value).toBeTruthy();
expect(value).toBeNull();
expect(value).toBeGreaterThan(3);
expect(value).toBeCloseTo(0.3, 5);
expect(str).toMatch(/regex/);
expect(arr).toContain(item);
expect(arr).toHaveLength(3);
expect(obj).toHaveProperty('name');
expect(obj).toMatchObject({ name: 'Alice' });
expect(() => fn()).toThrow(CustomError);

Mocking

// Mock function
const mockFn = jest.fn();
mockFn.mockReturnValue(42);
mockFn.mockResolvedValue({ data: 'test' });
expect(mockFn).toHaveBeenCalledWith('arg1');
expect(mockFn).toHaveBeenCalledTimes(1);

// Mock module
jest.mock('./database');
const db = require('./database');
db.getUser.mockResolvedValue({ name: 'Alice' });

// Mock with implementation
jest.mock('./api', () => ({
  fetchUsers: jest.fn().mockResolvedValue([{ name: 'Alice' }]),
}));

// Spy
const spy = jest.spyOn(console, 'log').mockImplementation();
expect(spy).toHaveBeenCalledWith('expected');
spy.mockRestore();

// Fake timers
jest.useFakeTimers();
jest.advanceTimersByTime(1000);
jest.useRealTimers();

Async Testing

test('fetches users', async () => {
  const users = await fetchUsers();
  expect(users).toHaveLength(3);
});

test('resolves with data', () => {
  return expect(fetchData()).resolves.toEqual({ data: 'value' });
});

test('rejects with error', () => {
  return expect(fetchBadData()).rejects.toThrow('not found');
});

React Component Testing (Testing Library)

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import LoginForm from './LoginForm';

test('submits login form', async () => {
  const onSubmit = jest.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  fireEvent.change(screen.getByLabelText('Email'), {
    target: { value: 'user@test.com' },
  });
  fireEvent.change(screen.getByLabelText('Password'), {
    target: { value: 'password123' },
  });
  fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(onSubmit).toHaveBeenCalledWith({
      email: 'user@test.com', password: 'password123',
    });
  });
});

Snapshot Testing

test('renders correctly', () => {
  const tree = renderer.create(<Button label="Click" />).toJSON();
  expect(tree).toMatchSnapshot();
});
// Update: jest --updateSnapshot

Anti-Patterns

BadGoodWhy
expect(x === y).toBe(true)expect(x).toBe(y)Better errors
No await on asyncAlways awaitSwallows failures
Snapshot everythingSnapshot UI, assert logicSnapshot fatigue

Quick Reference

TaskCommand
Run allnpx jest
Watchnpx jest --watch
Coveragenpx jest --coverage
Update snapshotsnpx jest --updateSnapshot
Run filenpx jest tests/calc.test.js
Single testtest.only('name', () => {})

Deep Patterns

For production-grade patterns, see reference/playbook.md:

SectionWhat's Inside
§1 Production ConfigNode + React configs, path aliases, coverage thresholds
§2 Mocking Deep DiveModule/partial/manual mocks, spies, timers, env vars
§3 Async PatternsPromises, rejections, event emitters, streams
§4 test.eachArray, tagged template, describe.each for table-driven tests
§5 Custom MatcherstoBeWithinRange, toBeValidEmail, TypeScript declarations
§6 React Testing LibraryuserEvent, hooks, context providers
§7 Snapshot TestingComponent, inline, property matchers
§8 API Service TestingMocked axios, CRUD patterns, error handling
§9 Global SetupMulti-project config, DB setup/teardown
§10 CI/CDGitHub Actions with coverage gates
§11 Debugging Table10 common problems with fixes
§12 Best Practices15-item production checklist
我的收藏