Your front door to testing with Jest

Lucas Bandeira — Tue, 21 Sep 2021 13:20:27 +0000

What is testing:

Testing is, in short, to see if our code is executing properly, there is a number of ways to do so, but today we will be talking about automated tests.

Automated tests are a software testing technique where we write pre-determined tests to check automatically if our code is running as expected.
There are a number of benefits to writing automated tests, such as:

Saves a lot of time as oposed of manual testing
Is a reliable way to prevent bugs and issues as we write our code
Monitors the functionality of our code to see if any alterations we make breaks the app, before sending it to production
Overall improves our coding skill

There are diferent types of testing, like:

End to end:

Tests the entire aplication by clicking on links and navigating through the page as a user would interact with the app.

Integration:

Verifies if multiple units of our code are working together as they should and returning the wanted outcome.

Unit:

Verifies if individual, isolated units of our code (a Class or a function) are working.

Static:

Catches typos or type errors as we are writing the code.

Today we will be focusing on unit testing.

What is unit testing:

Unit testing is to verify if individual parts of our code work as expected, such as methods returning a specified outcome if we pass specific parameters to it. They should be short isolated tests to check if there is any error in the functions that compose our app, and for that, today we will be introducing Jest.

What is Jest

Jest describes itself as "a delightful JavaScript Testing Framework with a focus on simplicity", it was created by Christoph Nakazawa and is maintained by Facebook. It can be used to test code in projects that use: Babel, TypeScript, Node, React, Angular, Vue and more.

Installing Jest

We can Install Jest by initiating a project with

npm init -y

to generate our package.json file. Then, we can add jest to our project with

npm install jest --save-dev

We are saving it as a dev dependency because we will be running our tests in development, before we send our app into production.

Next, we should go into our generated package.json file and write our scripts for testing, like so

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

Then, when we run this code with npm run test, jest will automatically search our project for our test files and execute the tests we've written.

Creating our test file:

Our test file should be named after the file we're trying to test, with the extension of ".test.js" or ".spec.js", these extensions are what Jest will look for in order to execute our tests, so, as an example, if we're trying to test a file called "hello.js", we should create a testing script called "hello.test.js".

Lets create our "hello.js" file, which will contain the following code:

// hello.js
function hello(firstName, lastName) {
  return `Hello ${firstName} ${lastName}`
}
module.exports = hello;

We will be using this syntax for exporting because jest doesn't natively support ES6+ exporting, it is possible to use, but would require some extra configuration.

Now, we will create our test file by importing the method we're trying to test, then we will create our test using Jest's global functions "test" or "it", which takes two parameters, the first is a string which contains a brief description of the test we're trying to execute, and the second is a callback function containing the actual test.

// hello.test.js
const hello = require('./hello')

test('should say hello to the full name passed', () => {
    const firstName = 'John'
    const lastName = 'Doe'
    const result = hello(firstName, lastName)
    expect(result).toBe('Hello John Doe')
})

We can run this code by typing npm run test in our terminal, and we can see our first test running successfully.

And thats it! We've just written our first unit test, so lets go back and take a look at what we just did in greater detail.

In this test we are using what is called a "triple A" pattern which stands for:

Arrange:

To prepare what will be needed in order to execute our test

const firstName = 'John'
const lastName = 'Doe'

Act

To call the method we're trying to test with the information we've already arranged

const result = hello(firstName, lastName)

Assert

To determine what is the expected outcome and if the function we've acted upon is executing properly.

expect(result).toBe('Hello John Doe')

The first two steps are easy to follow, but let's take another look at step three and explain what is going on.

Here, we are calling another one of Jest's functions, "expect", and that gives us access to what jest calls "matchers", which are methods that are used to see if our result meets the requirements of our test. They are pretty self explanatory, so in this example we want our result .toBe("Hello John Doe").

For a more in depth look into Jest Expect method and its Matchers we can access this link: Expect . Jest

And that's it for our introduction about unit testing with Jest, if you want to expand your knowledge about testing and what Jest is capable of, here are some links that I used as learning material:
Getting Started . Jest
JavaScript Testing Introduction Tutorial - Unit Tests, Integration Tests & e2e Tests
Jest Crash Course

Next time we will take a deeper dive at Jest's capabilities by writting some tests to a faulty app.

DEV Community: Lucas Bandeira