Jest: Does It Test Funny to You?

Originally published on Ackee Blog on November 18, 2021

In this post, I take a closer look at Jest, a popular JavaScript testing framework developed by Facebook. I’ll discuss its features, advantages, and potential drawbacks, sharing practical experiences and tips for writing effective tests using Jest in real-world projects.

Introduction to Jest

Jest is a delightful JavaScript testing framework with a focus on simplicity. It works out of the box for most JavaScript projects and has become the de facto standard for testing React applications, though it works equally well with any JavaScript project. For comprehensive documentation, visit the Jest website.

What Makes Jest Special?

Zero Configuration Philosophy

Jest’s biggest strength is its “zero config” approach:

// No setup required - this just works
describe('Math operations', () => {
  test('addition', () => {
    expect(2 + 2).toBe(4);
  });
});

No need for:

• Complex configuration files
• Multiple dependencies
• Separate assertion libraries
• Manual mocking setup

Built-in Features

Jest comes with everything you need:

• Test runner
• Assertion library
• Mocking capabilities
• Code coverage
• Snapshot testing

Jest’s Superpowers

1. Intelligent Test Running

Jest’s watch mode is incredibly smart:

# Only runs tests related to changed files
npm test -- --watch

# Interactive mode with helpful options
npm test -- --watchAll

The watch mode provides options like:

• p - Filter by filename pattern
• t - Filter by test name pattern
• u - Update snapshots
• i - Update snapshots interactively

2. Snapshot Testing

Perfect for component testing and preventing regressions:

import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';

test('Button component matches snapshot', () => {
  const tree = renderer
    .create(<Button variant="primary">Click me</Button>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Snapshots catch unexpected changes:

// For data structures too
test('user object structure', () => {
  const user = createUser({ name: 'John', age: 30 });
  expect(user).toMatchSnapshot();
});

3. Powerful Mocking System

Jest’s mocking capabilities are extensive:

// Automatic mocking
jest.mock('./userService');

// Manual mocking with implementation
jest.mock('./userService', () => ({
  getUser: jest.fn().mockResolvedValue({ id: 1, name: 'John' }),
  createUser: jest.fn().mockImplementation(data => ({ id: 2, ...data }))
}));

// Spy on existing modules
import * as userService from './userService';
jest.spyOn(userService, 'getUser').mockResolvedValue(mockUser);

4. Rich Assertion Library

Jest’s expect API is both powerful and readable:

// Basic assertions
expect(value).toBe(4);
expect(value).toEqual({ id: 1, name: 'John' });
expect(value).toBeNull();
expect(value).toBeUndefined();
expect(value).toBeTruthy();

// String matching
expect(message).toMatch(/hello/i);
expect(message).toContain('world');

// Array and object matching
expect(fruits).toContain('apple');
expect(user).toHaveProperty('name', 'John');
expect(numbers).toHaveLength(3);

// Function testing
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith('arg1', 'arg2');
expect(mockFn).toHaveBeenCalledTimes(2);

// Async testing
await expect(fetchUser(1)).resolves.toHaveProperty('name');
await expect(invalidRequest()).rejects.toThrow('Invalid input');

Common Jest Pitfalls and Solutions

1. Async Test Issues

Problem: Tests passing when they should fail

// BAD: Promise not returned or awaited
test('async operation', () => {
  asyncOperation().then(result => {
    expect(result).toBe('success'); // This might not run
  });
});

// GOOD: Properly handle async
test('async operation', async () => {
  const result = await asyncOperation();
  expect(result).toBe('success');
});

// GOOD: Return promise
test('async operation', () => {
  return asyncOperation().then(result => {
    expect(result).toBe('success');
  });
});

2. Mock Leakage Between Tests

Problem: Mocks affecting other tests

// BAD: Mocks persist between tests
jest.mock('./userService');

test('first test', () => {
  userService.getUser.mockResolvedValue(mockUser);
  // Test implementation
});

test('second test', () => {
  // This test might be affected by first test's mock
});

// GOOD: Clear mocks between tests
beforeEach(() => {
  jest.clearAllMocks();
});

3. Snapshot Brittleness

Problem: Snapshots breaking on irrelevant changes

// BAD: Full component snapshot
expect(component).toMatchSnapshot();

// GOOD: Focused snapshot
expect(component.find('.error-message').text()).toMatchSnapshot();

// GOOD: Inline snapshot for small values
expect(formatCurrency(123.45)).toMatchInlineSnapshot(`"$123.45"`);

Testing Strategies with Jest

1. Test Structure (AAA Pattern)

test('should calculate tax correctly', () => {
  // Arrange
  const price = 100;
  const taxRate = 0.1;
  
  // Act
  const result = calculateTax(price, taxRate);
  
  // Assert
  expect(result).toBe(10);
});

2. Test Isolation

// Each test should be independent
describe('Shopping cart', () => {
  let cart;
  
  beforeEach(() => {
    cart = new ShoppingCart(); // Fresh instance for each test
  });
  
  test('should add item', () => {
    cart.addItem({ id: 1, name: 'Book', price: 20 });
    expect(cart.getTotal()).toBe(20);
  });
  
  test('should remove item', () => {
    cart.addItem({ id: 1, name: 'Book', price: 20 });
    cart.removeItem(1);
    expect(cart.getTotal()).toBe(0);
  });
});

3. Edge Case Testing

describe('User input validation', () => {
  test.each([
    ['', 'Email is required'],
    ['invalid', 'Invalid email format'],
    ['user@', 'Invalid email format'],
    ['@domain.com', 'Invalid email format'],
    ['user@domain', 'Invalid email format'],
  ])('should reject invalid email: %s', (email, expectedError) => {
    expect(() => validateEmail(email)).toThrow(expectedError);
  });
  
  test('should accept valid email', () => {
    expect(validateEmail('user@example.com')).toBe('user@example.com');
  });
});

Jest vs. Alternatives: When to Choose Jest

Choose Jest When:

• Starting a new project with no existing test infrastructure
• Working with React or other Facebook ecosystem tools
• Team wants minimal configuration and quick setup
• Snapshot testing would be beneficial
• Rich IDE integration is important

Consider Alternatives When:

• Performance is critical (large test suites)
• Browser testing is a primary requirement
• Maximum flexibility in configuration is needed
• Working with legacy systems with specific requirements

Conclusion

Jest has earned its popularity through excellent developer experience, comprehensive features, and minimal setup requirements. While it may not be the fastest or most lightweight option, its productivity benefits often outweigh performance concerns, especially for small to medium-sized projects.

The framework’s strengths lie in:

• Excellent out-of-box experience
• Rich feature set with minimal configuration
• Strong ecosystem and community support
• Excellent debugging and error reporting

Jest’s main weaknesses are:

• Performance overhead on large projects
• Memory consumption
• Occasionally cryptic error messages with complex mocks

For most JavaScript projects, especially those in the React ecosystem, Jest provides an excellent testing foundation. Its continued development and strong community support make it a safe choice for teams looking to establish solid testing practices without extensive configuration overhead.

Does Jest test funny to me? Not at all—it tests quite seriously and effectively, with just enough humor in its helpful error messages to keep developers sane during long testing sessions!