Unit Test #1: doing a simple unit test with typescript + jest

Hello everyone 🙋‍♂️, in this post I'm going to explain how to do a simple unit test with typescript and jest.

---

First of all, I'll make a function that solves the problem known as fizzbuzz and then I'll unit test the solution.

Fizzbuzz problem: Write a code that prints numbers from 1 to 100 to the console. If the number is a multiple of 3, print the word “fizz”. If the number is a multiple of 5, print the word "buzz". If the number is a multiple of 3 and 5, print the word "fizzbuzz".

To solve the problem, let's create a main class and add a function called fizzbuzz that takes a parameter and evaluates it based on the given conditions.

// 01-basic.ts
export class Main {

  fizzbuzz(num: number): string {

    if ( num % 3 === 0 && num % 5 === 0 ) {
      return 'fizz buzz';
    }

    if ( num % 3 === 0 ) {
      return 'fizz';
    }

    if ( num % 5 === 0 ) {
      return 'buzz';
    }

    return `${num}`;
  }

}

Now, let's create a spec file and write the following code:

// 01-basic.spec.ts
import { Main } from "./01-basic";

describe('@MainTest', () => {
  let component: Main;

  beforeEach(() => {
    component = new Main();
  })
})

👨‍🏫 Explanation: We just create the container for unit tests. Describe function takes two parameters, the first ('@MainTest') is its name and you can name it whatever you want. The second is a jest function and inside it we create a variable of the type of our class and then initialize it in a structure called beforeEach. As its name says, inside it we put all the variables or functions that need to be initialized or executing before executing the unit test.

---

Before writing our first use case for testing, we need to read about a well-known pattern for writing tests: PATTERN ARRANGE-ACT-ASSERT

---

Following the pattern, let's write ✍️ the solution to our first use case:
Test #1: call function with a number multiple of 3 and 5 and return 'fizzbuzz'

• Arrange => create a constant with the number to evaluate.
• Act => evaluate the number in the fizzbuzz function.
• Assert => compare the output of the fizzbuzz function and the expected result.

// Pattern Arrange-Act-Assert
it('should return fizz buzz if number es mod 3 and 5', () => {
  // arrange
  const numberToEvaluate = 30;
  // act
  const result = component.fizzbuzz(numberToEvaluate);
  // assert
  expect(result).toEqual('fizz buzz');
})

After running jest test command, we get the following output 👍:

Now, you need to create all the tests necessary to cover 💯 percent of the class.

---

I hope this post has helped you 👍. I'll make other posts with other examples that I know might be helpful 🤝.

Solution repository: https://github.com/JuanSW18/unit-test-examples/blob/master/01-basic.spec.ts