Testing JavaScript Code with Jest

Get Started with Jest 🚀

First thing first — let’s start your testing journey with Jest.

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

And trust me, your first test is much easier than it sounds. 😄

Setting Up Jest

First, create a folder with any name you like.

For example, I created: Practice-jest

Now open this folder inside VS Code.

Step 1 — Create package.json

Before installing Jest, we need a package.json file.

Run this command in your terminal:

npm init -y

npm is basically a package manager for JavaScript.

You can also use Yarn if you prefer:

yarn init -y

After running the command, you should see a package.json file inside your folder.

Great! 🎉

Step 2 — Install Jest

Now let’s install Jest.

Using npm:

npm install --save-dev jest

Or using Yarn:

yarn add --dev jest

You can find the official Jest documentation here:

https://jestjs.io/docs/getting-started

Now, take a look at your package.json.

You should find Jest installed under:

"devDependencies"

like:

Great work! 🎉

Jest is now ready.

Step 3 — Create a JavaScript Function

Now let’s create a simple JavaScript function that we can test.

Create a new file called: sum.js

Inside it, create a sum function:

But wait…

How will our test file access this function?

We need to export it.

Since we’re using JavaScript with CommonJS, add:

module.exports = sum;

So your complete sum.js should look like this:

If you don’t know what module.exports means yet, don't worry.

You can learn more about JavaScript modules and import/export here:

https://www.w3schools.com/js/js_modules.asp

Step 4 — Create Your First Test File 🧪

Now comes the exciting part.

Let’s create a file for testing.

Use the same name as your JavaScript file, but add .test before .js.

So:

sum.js

becomes:

sum.test.js

like:

Your folder should now look something like:

Practice-jest/
│
├── node_modules/
├── package.json
├── sum.js
└── sum.test.js
└── yarn.lock

Step 5 — Import the Function

Now let’s import the sum function we created in sum.js.

Since we’re using JavaScript/CommonJS syntax:

const sum = require('./sum');

Now our test file knows about the sum function.

Step 6 — Write Your First Test 🎯

Jest provides a test block that we can use to create a test.

Get Haider ali’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Its basic syntax looks like this:

test(message, callback)

Let’s break it down.

On the left side, we write a message describing what we’re testing.

For example:

test("adds 1 + 2 to equal 3", callback)

On the right side, we provide a callback function.

This is where our actual test will run.

So:

test("adds 1 + 2 to equal 3", () => {
   
     // write your test case

});

Pretty simple, right? 😄

Step 7 — Use Jest Matchers

Now we need a way to actually check whether our function is giving us the expected result.

This is where Jest matchers come in.

Jest uses matchers to let you test values in different ways.

You can learn more about Jest matchers here:

https://jestjs.io/docs/using-matchers

For our sum function, we're going to use:

expect()

and:

toBe()

expect() returns an expectation object, while toBe() is the matcher we use to check the result.

Now let’s write our actual test:

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

And that’s it! 🎉

You just wrote your first Jest test case.

What Does This Line Mean?

Let’s break this down:

expect(sum(1, 2)).toBe(3);

We’re basically saying:

“I expect the result of sum(1, 2) to be 3."

We pass 1 and 2 to our sum function:

sum(1, 2)

Our function returns:

3

Then Jest checks:

.toBe(3)

If the result is 3 → ✅ Test passes

If the result is something else → ❌ Test fails

Step 8 — Add a Test Script

We’re almost there!

Now we need a simple way to run our tests.

Open your package.json and add a test script:

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

Now your package.json can look something like:

Step 9 — Run Your First Test 🚀

Now save all your files.

Open your terminal and run:

Using npm

npm test

Or using Yarn

yarn test

And now…

What do you get?

PASS? 🎉

If your test passes, congratulations!

You just successfully wrote and ran your first JavaScript test using Jest.

🎉 That’s It!

You started with a simple JavaScript function:

function sum(a, b) {
  return a + b;
}

Then you created your first test:

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

And finally, you ran it with:

npm test

If you see:

PASS

you did it! 🥳

That’s your first test case.

It might look small, but this is the beginning of your testing journey.

From here, you can start learning more about matchers, multiple test cases, describe, beforeEach, mocking, async testing, React Native testing, and eventually Appium/Jest automation.

Welcome to testing! 🧪🚀