DEV Community

Chandrashekhar Kachawa
Chandrashekhar Kachawa

Posted on • Originally published at ctrix.pro

A Developer's Guide to Jest: What, When, and How to Test

#jest #javascript #beginners #typescript

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It's one of the most popular choices in the JavaScript ecosystem, especially within the React community, but its power and versatility make it a great fit for nearly any JavaScript project. This guide will walk you through how to use Jest, what to test with it, and when you might need to reach for a different tool.

Getting Started with Jest

Setting up Jest is incredibly straightforward. In a new or existing project, you can add it with your favorite package manager:

# Using npm
npm install --save-dev jest

# Using pnpm
pnpm add -D jest

# Using yarn
yarn add --dev jest
Enter fullscreen mode Exit fullscreen mode

Next, add a test script to your package.json:

{
  "scripts": {
    "test": "jest"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, let's write a simple test. Imagine you have a utility function that adds two numbers.

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;
Enter fullscreen mode Exit fullscreen mode

To test this, you would create a file named sum.test.js. Jest automatically discovers and runs files with .test.js or .spec.js extensions.

sum.test.js

const sum = require('./sum');

describe('sum', () => {
  it('should add two numbers correctly', () => {
    expect(sum(1, 2)).toBe(3);
  });

  it('should handle negative numbers', () => {
    expect(sum(-1, -1)).toBe(-2);
  });
});
Enter fullscreen mode Exit fullscreen mode

When you run pnpm test, Jest will execute this file and give you a clean, readable output indicating whether your tests passed or failed.

Core Concepts

  • describe(name, fn): Creates a block that groups together several related tests.
  • it(name, fn) or test(name, fn): This is your actual test case.
  • expect(value): The starting point for any assertion. When you wrap a value in expect, you get access to "matchers."
  • Matchers: Functions that let you validate a value in different ways. In the example above, .toBe(value) is a matcher that checks for exact equality. Other common matchers include toEqual (for deep object equality), toBeTruthy, toBeFalsy, toContain, and many more.

What to Test with Jest

Jest excels at unit testing and integration testing in a Node.js environment. Here are the ideal candidates for Jest tests:

  1. Pure Functions & Business Logic: This is Jest's sweet spot. Functions that take inputs and produce outputs without side effects (like API calls or file system changes) are easy to test and form the backbone of a reliable application.
  2. Component Logic: For UI frameworks like React, Vue, or Svelte, you can test the logic inside your components. For example, you can check if a component's state updates correctly when a function is called, without actually rendering the component to a screen.
  3. API Endpoints: In a Node.js backend (like Express or Fastify), you can test your API endpoints by mocking requests and asserting that the correct status codes, headers, and JSON payloads are returned.

What Not to Test with Jest

It's equally important to know when Jest isn't the right tool for the job.

  1. End-to-End (E2E) Testing: E2E testing involves simulating a real user's journey through your application in a browser. Since Jest runs in a Node.js environment (via JSDOM), it doesn't have a real browser engine. It cannot click buttons, fill out forms, and navigate pages as a user would.

    • Use Instead: Tools like Cypress or Playwright are designed specifically for this. They run tests in actual browsers (Chrome, Firefox, etc.), providing much more reliable results for user-facing flows.

  2. Visual Regression Testing: This is the practice of taking screenshots of your UI and comparing them against a baseline to catch unintended visual changes. While Jest's snapshot testing can capture the structure of a component's output, it knows nothing about its visual appearance.

    • Use Instead: Tools like Percy or Chromatic integrate with E2E or component testing frameworks to perform robust visual testing.

  3. Performance Testing: Jest is not built for benchmarking code performance. Its test runner overhead and focus on correctness make it unsuitable for measuring execution speed accurately.

    • Use Instead: Use dedicated benchmarking libraries like Benchmark.js or profiling tools built into Node.js and browsers.

Advanced Features: Mocking and Snapshot Testing

  • Mocking: Jest has a powerful built-in mocking system (jest.fn(), jest.spyOn(), jest.mock()). Mocking allows you to replace dependencies (like an API service or a database module) with a "fake" version. This lets you test a piece of code in isolation, ensuring you're only testing its logic and not that of its dependencies.

  • Snapshot Testing: When you run a snapshot test, Jest generates a .snap file containing the rendered output of a component or the structure of an object. On subsequent test runs, Jest compares the new output to the saved snapshot. If they don't match, the test fails. This is useful for ensuring that UI component structures or large object shapes don't change unexpectedly. However, use it with caution—it's easy to accidentally approve incorrect snapshots.

Conclusion

Jest is a phenomenal tool for building a fast, reliable, and maintainable testing suite for your JavaScript codebase. It is the ideal choice for unit and integration tests, where you are verifying the logic and correctness of your functions, modules, and components.

However, a comprehensive testing strategy doesn't stop there. For verifying user journeys and visual presentation, you should complement Jest with specialized tools like Cypress, Playwright, or Percy. By using the right tool for the right job, you can build confidence in your code and ship better products.

Top comments (0)