Learn Jest - Installation & Basic Configuration

#Introduction

In episode 0 you already installed Jest, and in episode 2 you understood its architecture. Episode 3 now ties both together into a real workflow: adding Jest to a project cleanly, writing a test script, organizing folder structure and file naming, and reading CLI output correctly.

This episode is the bridge from theory to practice. After this, you'll be able to run a real suite, understand the result reports, and debug when a test fails — skills you'll use in every remaining episode.

#Adding Jest to a Project

#Plain JavaScript Project

Start from an existing project or one you just created:

npm init -y
npm install --save-dev jest

For projects using ESM ("type": "module" in package.json), the latest Jest version supports it directly. If you're using CommonJS, nothing needs to change. The fastest way to verify everything is connected:

npx jest --version

#TypeScript Project

For TypeScript, add ts-jest or use Babel — full details are in episode 9. For now, just install the packages and create the configuration:

npm install --save-dev jest ts-jest typescript @types/jest

The command npm install --save-dev jest ts-jest typescript @types/jest installs Jest plus TypeScript support. The @types/jest package provides type definitions for describe, test, and expect in your editor.

#Writing the test Script in package.json

#Mapping the Test Command

Add a test script so npm test runs Jest:

{
  "name": "belajar-jest",
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

The test:watch script runs the interactive watch mode, while test:coverage runs the suite and generates a coverage report at the same time. Mapping these commands to npm means everyone on the team uses the same path instead of memorizing flags.

npm test

#Folder Structure and Test File Naming

#Consistent Patterns

There are two common patterns, and Jest supports both by default:

src/
  math.js
  math.test.js
tests/
  integration/
    api.test.js

The first pattern places test files next to their source (math.test.js beside math.js) — making navigation easy. The second pattern centralizes tests in a tests/ directory — suitable for large suites. The most important thing: pick one pattern and stay consistent across the whole codebase, because consistency makes test file discovery predictable.

Correct test file naming

math.test.js
math.spec.js
__tests__/math.js

#Running Jest in the CLI and Understanding the Output

#Reading the Result Summary

Run the suite and observe the output:

npx jest

The default output shows progress per file, followed by a summary: the number of tests passed, failed, and skipped, plus execution time. If something fails, Jest shows a diff between the actual and expected values along with the location of the problematic line.

Example suite to understand the output

function add(a, b) {
  return a + b;
}
 
test("adds positive numbers", () => {
  expect(add(2, 3)).toBe(5);
});
 
test("adds negative numbers", () => {
  expect(add(-1, -1)).toBe(-2);
});

#Frequently Used CLI Flags

A few important flags you'll use often:

• --watch: interactive mode, re-runs affected tests.
• --verbose: shows the full name of every test.
• --runInBand: runs tests serially in a single process, useful in CI or on weak machines.
• --testNamePattern: runs only tests whose names match a pattern.

npx jest -t "negative"

The flag npx jest -t "negative" runs only tests whose names contain the word "negative" — very useful when debugging a single test in a large suite.

#Wrap Up

Episode 3 brought installation, scripts, structure, and the CLI together into a real workflow. You can now add Jest to both JavaScript and TypeScript projects, map test commands to npm, organize a consistent folder structure, and read the CLI output to know what passed, failed, or was skipped.

Key takeaways:

• Install Jest as a devDependency, plus ts-jest for TypeScript projects.
• Map the test, test:watch, and test:coverage scripts to Jest commands.
• Choose a test file placement pattern and stay consistent across the codebase.
• Jest output shows progress, a summary, and easy-to-read error diffs.
• The -t flag runs tests by name; --runInBand runs serially.
• A tidy folder structure makes test file discovery predictable.

In the next episode, episode 4, we'll write correct unit tests — declaring with test and describe, basic matchers like toBe, toEqual, toContain, and toBeTruthy, setup teardown with beforeEach and friends, and testing pure functions and edge cases. This is the core episode that will shape your test-writing habits.