Testing, testing, 1, 2, 3…

How to get started unit testing your JavaScript code

Testing your code is one of the more intimidating parts of programming for beginners, it can be difficult to even figure out what to test, let alone how to do it. Most development courses will provide tests along with the challenges you need to solve so you never get to work directly with testing until you finish the material and are out in the scary big world of code on your own.

Let’s break it down: testing simply means comparing your code’s output with the expectations for your code. Input is put in, output is put out, the test gives you a yay or nay on success. For this article, we’ll focus on the simplest and most approachable kind of test: unit testing. More about the others later.

I’ve spent some time looking at different approaches and found Jest to be the easiest to understand to work with. Jest is a JavaScript library for creating your own tests. It’s an NPM package that can easily be added to your React projects.

First, figure out what you need to test and break your programs down into smaller pieces to make the task less daunting. You want to test every part of your code that has user interaction to make sure the user experience is seamless and pleasant: forms, buttons, contact pages etc. are simple enough to write but can cause needless grief when they don’t work properly.

Every test follows the same pattern: import the function to test, add input to the function, defined expected output, check actual output against expected output.

Jest works in an NPM environment, so you’ll need to have Node installed on your system. Odds are you do if you’re reading this. Let’s get into it.

1. Create a folder and initialize

mkdir my-first-jest && cd $_
npm init -y

2. Install Jest:

npm i jest --save-dev

3. Add NPM script for running tests. In package.json add:

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

Now we’ll get to writing actual tests, beginning with a failing test to establish a baseline for your program, known as test-driven development (TDD). Jest expects to find test files in a folder called , so go ahead and create one:

mkdir __tests__

You’ll create all your test files within that folder. What exactly your code looks like will depend on what you’re testing but it generally follows the same pattern:

describe("test function", () => {
  // test block
});

describe is a Jest method containing tests and takes two arguments: a string and a callback function. In it you’re writing the actual test function and define the expected output.

describe("function", () => {
  test("purpose of the test (input)", () => {
    const input = [
      { input1 },
      { input2 },
      { input3 }
    ];
    const output = [{ input2 }];
  });
});

expect is another Jest keyword, comparing our returns to the expected output, use it like this:

describe("function", () => {
  test("purpose of the test (input)", () => {
    const input = [
      { input1 },
      { input2 },
      { input3 }
    ];
  const output = [{ input2 }];
  
  expect(function(input, "")).toEqual(output);
  });
});

Run your test from the command line and watch it fail:

npm test

You are now set to really test your code, I would recommend following the steps in this Jest tutorial (I’ll spare you copy/pasting specific examples since following their guide is much more comprehensive and helpful than playing through a single scenario here. Things you generally want to look for in writing your own tests are variations in input, edge cases, special characters, responses to different events etc.