Setting Up Jest with TypeScript
Jest is the dominant testing framework for TypeScript Node.js and React projects. TypeScript integration uses `ts-jest` (compiles with tsc, full type checking) or `babel-jest` (transpiles only, faster but no type errors). `@types/jest` provides typed `describe`, `it`, `expect`, and all matchers.
Jest + TypeScript Setup - Two Approaches
# ── Option 1: ts-jest - full TypeScript support ────────────────
npm install --save-dev jest ts-jest @types/jest
# jest.config.ts
// import type { Config } from "jest";
// const config: Config = {
// preset: "ts-jest",
// testEnvironment: "node", // or "jsdom" for React
// roots: ["<rootDir>/src"],
// testMatch: ["**/*.test.ts", "**/*.spec.ts"],
// moduleNameMapper: {
// "^@/(.*)$": "<rootDir>/src/$1", // path alias
// },
// transform: {
// "^.+\.tsx?$": ["ts-jest", {
// tsconfig: { strict: true }, // enforce strict in tests too
// }],
// },
// };
// export default config;
# ── Option 2: esbuild-jest or Vitest (faster) ──────────────────
# Vitest is recommended for Vite projects (zero config, same API):
# npm install --save-dev vitest @vitest/ui
# In vite.config.ts: test: { environment: "node" }
# CLI: npx vitest run → same syntax as Jest
# ── First test ─────────────────────────────────────────────────
// src/utils/format.ts
export function formatPriority(p: string): string {
return p.charAt(0).toUpperCase() + p.slice(1);
}
// src/utils/format.test.ts
import { formatPriority } from "./format";
describe("formatPriority", () => {
it("capitalises the first letter", () => {
expect(formatPriority("high")).toBe("High");
});
it.each([
["low", "Low"],
["medium", "Medium"],
["critical", "Critical"],
])("handles %s → %s", (input, expected) => {
expect(formatPriority(input)).toBe(expected);
});
});
# ── package.json scripts ─────────────────────────────────────
// "test": "jest",
// "test:watch": "jest --watch",
// "test:coverage":"jest --coverage",
// "test:ci": "jest --ci --coverage --forceExit"Common Mistakes
- Using `babel-jest` without type checking - Babel strips types without checking. Your tests run even with type errors. Use `ts-jest` or run `tsc --noEmit` separately in CI to catch type errors.
- Not mapping path aliases in jest.config - if you use `@/` imports, add `moduleNameMapper` to jest.config or tests fail with 'Cannot find module @/...' even though the app builds fine.
- Skipping type checks in tsconfig for tests - apply the same `strict: true` to test files. Type safety in test code is just as important as in source code.
Tip
Tip
Practice Setting Up Jest with TypeScript in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Visual architecture and concepts for Setting Up Jest with TypeScript
Practice Task
Note
Practice Task - (1) Write a working example of Setting Up Jest with TypeScript from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Setting Up Jest with TypeScript is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready typescript code.
Key Takeaways
- Jest is the dominant testing framework for TypeScript Node.
- Using `babel-jest` without type checking - Babel strips types without checking. Your tests run even with type errors. Use `ts-jest` or run `tsc --noEmit` separately in CI to catch type errors.
- Not mapping path aliases in jest.config - if you use `@/` imports, add `moduleNameMapper` to jest.config or tests fail with 'Cannot find module @/...' even though the app builds fine.
- Skipping type checks in tsconfig for tests - apply the same `strict: true` to test files. Type safety in test code is just as important as in source code.