Mastering TypeScript Unit Tests with Ease

Photo by Dan Farrell

The Importance of Unit Testing 🛡️

Before diving into the TypeScript testing waters, let's establish why testing is more important than wearing orange on King's Day. Unit tests are your frontline defense against bugs, offering a way to check individual pieces of your code for correctness. They provide a safety net for future changes, and frankly, they make you look like a coding rockstar to anyone peeking at your repo.

Setting Up Your Testing Environment

First things first, we'll need a testing framework. Jest is like the warm stroopwafel of the JavaScript world – sweet, reliable, and something everyone loves. Let's set it up together:

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

Now, add a Jest config file to let our environment know we're serious about this:

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

Writing Your First Test

Picture this: you've got a TypeScript function that calculates the number of bikes crossing the Dam Square in an hour. Let's test it!

// bikeCounter.ts
export function bikeCount(hours: number): number {
  return hours * 50; // assuming 50 bikes cross per hour
}

And here's how we'd ensure not a single bike is uncounted:

// bikeCounter.test.ts
import { bikeCount } from './bikeCounter';

test('calculates number of bikes correctly', () => {
  expect(bikeCount(2)).toBe(100);
});

Run npm test, and voilà! 💡 Your test should pass unless the bikes have decided to take a spontaneous swim in the canal.

Mocking and Spies

Sometimes, you have to fake it 'til you make it – and by "it," I mean mocking external dependencies. Spies let us eavesdrop on function calls, much like overhearing tourists marvel at their first herring sandwich.

// speedTracker.ts
export function alertSpeedster(speed: number): void {
  if (speed > 40) {
    console.log("We've got a fast one!");
  }
}

// speedTracker.test.ts
import * as SpeedTracker from './speedTracker';
const spy = jest.spyOn(SpeedTracker, 'alertSpeedster');

SpeedTracker.alertSpeedster(45);
expect(spy).toHaveBeenCalledWith(45);

Using Matchers to Write More Expressive Tests

With Jest, your tests can have more expressions than a Dutchman arguing about bicycle lanes. Matchers let you write descriptive tests that read like a book – if that book were extremely interested in software quality.

expect(bikeCount(2)).toBeGreaterThan(99); // Feels like winning the postcode loterij, right?

Conclusion

Congratulations! 🥳 You now have a treasure map to the land of TypeScript unit tests. As you embark on this noble quest, remember that the key to good testing is not just about covering your bases; it's about writing tests that truly reflect the intent of your code. So, test thoughtfully, refactor without fear, and let your tests be the stroopwafels that bring sweetness to your development process.

Happy testing, and remember, no matter how much herring you eat, it's your code that should always be fishy-free!

More like this

Unraveling Type Assertions in TypeScript 👀

Have you ever encountered a peculiar TypeScript compiler refusing to acknowledge your certainty about the type of variable you're dealing with? Well, you're not alone! Type assertion in TypeScript is like telling the compiler, "Trust me, I know what I'm doing" (famous last words, right?).

Read

Embrace Simplicity: TypeScript Without Bundlers!

Have you ever found yourself tangled in a web of build tools and configurations when dealing with TypeScript projects? 💡 If your answer is a resounding "yes," then you're not alone. Bundlers like webpack are powerful, but sometimes they can be an overkill for smaller projects or for developers who value simplicity.

Read

TypeScript in the Cloud: A Software Engineer's Guide

If you're a coder with a penchant for strong typing and sleek syntax, you've likely dabbled with TypeScript. But as you float your app ideas into the nebulous realm of cloud computing, you might wonder, "Can TypeScript cozy up with bigwig platforms like AWS or Azure?" Fear not, for you've docked at the right space station!

Read

TypeScript & WebSockets: A Real-Time Charm

Ever wondered how magical it feels when your web app communicates in real-time, just like a cosy chat at your favorite cafe? That's the power of WebSockets, which, together with TypeScript, can create a symphony of seamless data exchange for your project. Real-time applications are all the rage, from gaming platforms to chat apps, and understanding how to use TypeScript with WebSockets is vital.

Read