DEV Community

Tara Timmerman
Tara Timmerman

Posted on • Edited on

✨ Copy, Paste, Test: A simple Jest setup for TypeScript apps

#webdev #testing #typescript #jest

Spinning up a small app? It’s tempting to skip testing. It can feel like overkill. But unit tests are like seatbelts for your code. You don't need them until you really, really do.

Here's how to quickly set up Jest with TypeScript, with minimal boilerplate. No stress, just copy and paste.

🚀 Quick setup: Copy & paste this

1. Install what you need 

npm install --save-dev jest ts-jest @types/jest
Enter fullscreen mode Exit fullscreen mode

This will install:

  • Jest: The testing framework.
  • ts-jest: A TypeScript preprocessor for Jest, so it can run TypeScript code.
  • @types/jest: Type definitions for Jest, so TypeScript understands Jest's global variables and methods.

2. Create your Jest config (jest.config.js) 

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom", // Use "node" if testing Node.js environments
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)"],
};
Enter fullscreen mode Exit fullscreen mode

3. Create your TypeScript config (tsconfig.json)

If you already have a tsconfig.json, just make sure:

  • "jest" is in your compilerOptions.types array.
  • Your include section covers both your source code and test files 
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "types": ["jest"] // <--- ADD "jest" to your types array
  },
  "include": [
    "src", // <--- ENSURE YOUR MAIN SOURCE DIRECTORY IS INCLUDED
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}
Enter fullscreen mode Exit fullscreen mode

4. Add a test script to package.json 

// Inside your package.json, under the "scripts" section:
"scripts": {
  "test": "jest"
}
Enter fullscreen mode Exit fullscreen mode

🧪 Just to make sure this thing is actually working

Say you’ve got a utility function in src/utils/add.ts:

export function add(a: number, b: number): number {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

Now, create a test for it in src/utils/add.spec.ts:

import { add } from "./add";

describe("add", () => {
  it("adds two numbers", () => {
    expect(add(2, 3)).toBe(5);
  });
});
Enter fullscreen mode Exit fullscreen mode

Run your tests with npm test, and boom, green means go. 🟢

💡 Notes & Customizations

Keep these points in mind for your project:

  • Source Location: Assumes main code is in src/. If yours is elsewhere (e.g., root, app/), update the include path(s) in tsconfig.json.
  • Test Environment: Default is jsdom (browser). For pure Node.js, change to "node" in jest.config.js.
  • Existing Test Script: If package.json has a test script, rename yours (e.g., "test:unit": "jest") or merge commands to avoid conflicts.
  • Minimal Setup: This is a quick-start config. Explore advanced Jest options (reporters, mocking, coverage, etc.) as needed.

🧱 Unit Tests are worth it (Even for tiny apps)

Unit tests sit at the base of the test pyramid. They’re small, fast, and often the most valuable tier of the testing process. Here’s why:

⚡ Fast: Unit tests run super quickly, so you can check things as you go.

🛡️ Safe: They help catch bugs early, before they spread.

💡 Great for Refactoring: You can tweak code without crossing your fingers.

Let’s say you need to change the add function to handle floating point numbers. Make the change, run your tests, and if something breaks, you’ll know right away.

🙌 That’s it. Now go write tests like you mean it.

Top comments (0)