✨ Copy, Paste, Test: A Simple Jest Setup for TypeScript Apps

[MyrinNew]

When building a small TypeScript app, it’s easy to skip unit tests. You might think, "My app is simple, it’s probably fine." But here’s the truth: unit tests are like insurance for your code. They catch bugs early, help you refactor confidently, and don’t take much time to set up.


I’ll show you how to quickly set up Jest with TypeScript, with minimal boilerplate. No stress, just copy and paste, and you’ll be up and running in minutes.





🧱 Why 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 before they spread, so you’re not stuck debugging later.
• 💡 Great for Refactoring: When you change code, you’ll instantly know if something broke.

Even in small projects, they’re like a safety net. Quick to add, and worth every minute.





🧰 Install Dependencies First

Before we get started, make sure you’ve installed the necessary development dependencies:






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







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.

🧰 Copy + Paste: Minimal Jest Setup for TypeScript

Here’s a simple Jest setup for small-to-medium TypeScript apps. This setup assumes you're not using localStorage directly in your tests, but checkout this post if you need that.


✅ jest.config.js





/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
transform: {
"^.+\\.tsx?$": "ts-jest",
},
testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)"],
};







✅ tsconfig.json





{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"lib": ["ES2022", "DOM"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"types": ["jest"]
},
"include": [
"src",
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx"
]
}







Add this script to your package.json:






"scripts": {
"test": "jest"
}










🧪 Writing Your First Test

Let’s write a simple unit test. Imagine you have a utility function in src/utils/add.ts:






export function add(a: number, b: number): number {
return a + b;
}







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);
});
});







Run your tests with npm test (or yarn test if you’re using Yarn), and you’ll see whether your test passes or fails.





🔁 Refactoring Made Easy

With unit tests in place, refactoring your code becomes far less stressful. Let’s say you need to change the add function to handle floating point numbers differently. After you make the change, simply run your tests again. If they pass, you’re good to go! If they fail, you can fix the issue immediately.


This is where the true power of unit tests shines: you can refactor with confidence, knowing that your tests will catch any unintended issues.





✅ TL;DR: Just Use This

Here’s everything you need to get started:

• ✅ jest.config.js: Minimal Jest setup for TypeScript apps.
• ✅ tsconfig.json: TypeScript config to make Jest work with your TypeScript code.
• ✅ package.json: Add a test script to run Jest.
• ✅ Write your tests: Add tests to your app, and run them with npm test.

This setup is perfect for small-to-medium TypeScript apps and gives you a solid foundation for writing tests.




More...