🛠️ 开发工具

Jest

Jest Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 开发工具🧭 Markdown 速查🏷️ 2 个标签

#jest#testing

向下滚动查看内容

A Quick Overview to Jest

Jest is a delightful JavaScript testing framework maintained by Facebook. It is widely used for unit testing, integration testing, and even end-to-end testing in modern JavaScript and Node.js applications. Jest comes with a powerful set of features, including a built-in test runner, assertion library, mocking utilities, snapshot testing, and test coverage reporting.

This guide targets Jest v20 and gives a concise yet practical overview of how to use it effectively.

Key Concepts Explained

describe(): Used to group related test cases into a test suite.
test() / it(): Define a single test case. it() is just a BDD-style alias for test().
expect(): Assertion library that checks whether a value meets expectations.
beforeEach() / afterEach(): Runs code before or after every test in a suite.
beforeAll() / afterAll(): Runs setup/teardown code once before or after all tests.
.only / .skip: Focus or ignore specific tests/suites.
Snapshot testing: Captures the rendered output and compares it across test runs.
Mock functions: Simulate function behavior or monitor how functions are called.
Timer mocks: Test time-based behavior like setTimeout() and setInterval().
Async testing: Write tests that handle Promises or async/await.

🚀 Quick Start

BASH

滚动查看更多

npm install --save-dev jest babel-jest

Add this to your package.json:

JSON

滚动查看更多

"scripts": {
  "test": "jest"
}

Run your tests:

BASH

滚动查看更多

npm test -- --watch

📖 See: Getting Started

✍️ Writing Tests

滚动查看更多

describe('My work', () => {
	test('works', () => {
		expect(2).toEqual(2);
	});
});

describe: Group related tests.
test or it: Define individual test cases.
expect: Make assertions.

🔄 it() is an alias for test().

🔧 Setup Hooks

Use these for setup/teardown routines:

滚动查看更多

beforeEach(() => { ... });
afterEach(() => { ... });
beforeAll(() => { ... });
afterAll(() => { ... });

🎯 Focusing or Skipping Tests

Focusing tests:

滚动查看更多

describe.only(...);
it.only(...); // or fit()

Skipping tests:

滚动查看更多

describe.skip(...);
it.skip(...); // or xit()

🏁 Optional CLI Flags

Flag	Description
`--coverage`	Show test coverage summary
`--detectOpenHandles`	Detect unclosed handles (e.g., sockets)
`--runInBand`	Run tests serially (useful for CI)

✅ Expectations (Matchers)

Basic

滚动查看更多

expect(value).not.toBe(value);
expect(value).toEqual(value);
expect(value).toBeTruthy();

Note: toEqual performs deep equality.

Snapshots

滚动查看更多

expect(value).toMatchSnapshot();
expect(value).toMatchInlineSnapshot();

Inline snapshots require Prettier.

Errors

滚动查看更多

expect(fn).toThrow(error);
expect(fn).toThrowErrorMatchingSnapshot();

Booleans

滚动查看更多

expect(value).toBeFalsy();
expect(value).toBeNull();
expect(value).toBeTruthy();
expect(value).toBeUndefined();
expect(value).toBeDefined();

Numbers

滚动查看更多

expect(value).toBeCloseTo(number, digits);
expect(value).toBeGreaterThan(number);
expect(value).toBeLessThanOrEqual(number);

Objects

滚动查看更多

expect(value).toBeInstanceOf(Class);
expect(value).toMatchObject(obj);
expect(value).toHaveProperty('key', value);

Arrays/Strings

滚动查看更多

expect(value).toContain(item);
expect(value).toHaveLength(number);
expect(value).toMatch(/pattern/);

Custom Matchers

滚动查看更多

expect.extend(customMatchers);
expect.any(Constructor);
expect.assertions(1);

⏱️ Async Tests

Promises

滚动查看更多

test('resolves correctly', () => {
  return somePromise().then(data => {
    expect(data).toEqual(...);
  });
});

Async/Await

滚动查看更多

test('awaits correctly', async () => {
  const result = await asyncFunc();
  expect(result).toBe(...);
});

📖 See: Jest Async Testing

📸 Snapshot Testing

滚动查看更多

it('renders correctly', () => {
	const output = something();
	expect(output).toMatchSnapshot();
});

For React components:

滚动查看更多

import renderer from 'react-test-renderer';

it('matches snapshot', () => {
	const tree = renderer.create(<Component />).toJSON();
	expect(tree).toMatchSnapshot();
});

⏲️ Timers

滚动查看更多

jest.useFakeTimers();

it('delays call', () => {
	jest.runOnlyPendingTimers();
	jest.runAllTimers();
});

📖 See: Timer Mocks

🧪 Mock Functions

Creating Mocks

滚动查看更多

const fn = jest.fn();
const squared = jest.fn(n => n * n);

Assertions

滚动查看更多

expect(fn).toHaveBeenCalled();
expect(fn).toHaveBeenCalledTimes(2);
expect(fn).toHaveBeenCalledWith(arg1, arg2);

Flexible Matchers

滚动查看更多

expect(fn).toHaveBeenCalledWith(expect.any(String));
expect(fn).toHaveBeenCalledWith(expect.arrayContaining([1, 2]));

Instances

滚动查看更多

const MyClass = jest.fn();
const a = new MyClass();
const b = new MyClass();
MyClass.mock.instances; // [a, b]

Call Data

滚动查看更多

fn.mock.calls.length;
fn.mock.calls[0][0];

Return Values

滚动查看更多

jest.fn().mockReturnValue('hello');
jest.fn().mockReturnValueOnce('hi');

Mock Implementations

滚动查看更多

const fn = jest
	.fn()
	.mockImplementationOnce(() => 1)
	.mockImplementationOnce(() => 2);

This comprehensive guide helps you get started with Jest testing or use it like a pro. It pairs perfectly with the React Testing Library for a user-centric testing workflow.

Jest

A Quick Overview to Jest

✍️ Writing Tests

🔧 Setup Hooks

🎯 Focusing or Skipping Tests

🏁 Optional CLI Flags

✅ Expectations (Matchers)

⏱️ Async Tests

📸 Snapshot Testing

⏲️ Timers

🧪 Mock Functions

相关 Cheat Sheets

Git

Vim

VS Code

Regex

Markdown