---

title: Jest Cheat Sheet date: 2022-09-09 00:00:00 background: bg-blue-500 description: A complete cheat sheet on Jest for testing React applications effectively. tags: React Testing Jest categories: - Testing intro: Jest is a JavaScript testing framework designed by Facebook. It works out of the box with modern JavaScript apps especially those built with React or Node.js. Its main goal is to simplify testing by providing all required features in one package test runner, assertion library, mocking, spies, coverage reports, and snapshot 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

npm install --save-dev jest babel-jest

Add this to your package.json:

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

Run your tests:

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

---

✅ 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.