Jest Basics for React

Jest is like the referee of your testing game — it runs all your tests, checks the results against what you expected, and reports who won or lost.

In this page:

Writing a Basic Test with test() and expect()
toBe vs. toEqual
Grouping Tests with describe()

Syntax

markup

describe("group name", () => {
  test("description", () => {
    expect(actual).toBe(expected);
    expect(objectValue).toEqual({ key: "value" });
  });
});

Writing a Basic Test with test() and expect()

A Jest test is a call to test() (or its alias it()) with a description string and a function containing the test logic. Inside, expect(value) starts an assertion, chained with a matcher like .toBe() to check the actual result against what you expected.

Note: Write test descriptions as a sentence describing the expected behavior, like 'adds two numbers correctly', so failures read clearly.

Warning: A test function that throws no error (including one with no assertions at all) is considered PASSING by Jest — always include at least one expect().

Example: Writing a Basic Test with test() and expect()

markup

// Run in your local React project (npm install required)
function add(a, b) { return a + b; }

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

toBe vs. toEqual

toBe checks strict equality (===), which works for primitives but fails for objects/arrays even with identical contents, since two separately-created objects are never === equal. toEqual instead performs a deep comparison, checking that the actual VALUES match, regardless of object identity.

Note: As a rule of thumb: use toBe for primitives (numbers, strings, booleans), toEqual for objects and arrays.

Warning: Using toBe to compare two objects with identical contents will fail, even though they 'look the same' — this is one of the most common Jest beginner mistakes.

Example: toBe vs. toEqual

markup

// Run in your local React project (npm install required)
test('primitive comparison uses toBe', () => {
  expect(2 + 2).toBe(4);
});

test('object comparison uses toEqual', () => {
  expect({ name: 'Asha' }).toEqual({ name: 'Asha' }); // passes
  // expect({ name: 'Asha' }).toBe({ name: 'Asha' }); // would fail!
});

Grouping Tests with describe()

describe() groups related test() calls under one shared label, making a test file's output organized and easier to scan, especially as the number of tests grows. describe blocks can also be nested for further organization.

Note: Name describe blocks after the component or function being tested, like describe('Button component', () => { ... }).

Warning: describe() blocks don't isolate state between the tests inside them by default — use beforeEach for that, not just grouping alone.

Example: Grouping Tests with describe()

markup

// Run in your local React project (npm install required)
describe('add function', () => {
  test('adds positive numbers', () => {
    expect(add(2, 3)).toBe(5);
  });
  test('adds negative numbers', () => {
    expect(add(-1, -1)).toBe(-2);
  });
});

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Mocking API Calls in Tests Next Lesson → Snapshot Testing

Jest Basics for React

Writing a Basic Test with test() and expect()

toBe vs. toEqual

Grouping Tests with describe()

Chapter Quiz — Complete all 9 topics to unlock

Login to run this code