Jest Setup and Basic Tests
Install Jest, write describe/it/expect tests, use matchers like toBe and toEqual, and run tests in watch mode during development.
Jest Setup and Basic Tests is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Test Frontend Code?
Tests catch regressions when you change code. They document expected behaviour. They give you confidence to refactor. Without tests, every change is a gamble that something else broke.
Installing Jest
For a Vite + React project, use Vitest (a Vite-native Jest-compatible test runner). For other setups, install Jest with babel-jest or ts-jest for TypeScript.
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jestTest File Naming
Place test files next to the source: Button.test.ts, utils.spec.ts. Or in a __tests__/ folder. Jest finds files matching *.test.* or *.spec.*.
describe, it, expect
Structure tests with describe blocks (groups) and it/test functions (individual tests). Assert with expect.
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});Common Matchers
Jest provides many matchers: toBe (strict equality), toEqual (deep equality), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan.
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();Testing Async Code
Return the promise or use async/await in tests. Jest waits for the promise to resolve before marking the test done.
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEach and afterEach
Run setup and cleanup before/after each test to keep tests isolated.
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});Running Tests
npm test runs all tests. npm test -- --watch (Jest) or vitest in watch mode re-runs tests on file change. Vitest's UI (vitest --ui) provides a browser-based test runner.
Test Coverage
jest --coverage (or vitest run --coverage) generates a coverage report showing which lines are tested. A target of 70%+ coverage is a common team goal. 100% coverage doesn't mean bug-free.
Writing Testable Code
Pure functions (no side effects) are trivially testable. Keep functions small and focused. Inject dependencies rather than importing them directly — this makes substituting test doubles easy.
Test Isolation
Each test should be completely independent. Tests that depend on each other's side effects are brittle. Avoid shared mutable state between tests. Reset all mocks in afterEach.
Quick Check
Which Jest matcher checks deep equality of two objects?
Recap: Jest Basics
describe groups tests. it/test defines individual tests. expect + matchers assert outcomes. toBe for primitives. toEqual for objects/arrays. Async tests with async/await or returning the promise. beforeEach/afterEach for isolation. Coverage reports show which lines are tested. Pure functions are easiest to test.
Frequently asked questions
Is the “Jest Setup and Basic Tests” lesson free?
Yes — the full text of “Jest Setup and Basic Tests” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Jest Setup and Basic Tests”?
Install Jest, write describe/it/expect tests, use matchers like toBe and toEqual, and run tests in watch mode during development. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Jest Setup and Basic Tests” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.