---
title: Testing isn't hard
date: "2019-11-08"
---

"I write two tests before implementing a method", "My project has 90% coverage".

I don't know about you, but that's something I don't hear very often. But why is that?

Testing is not even that difficult to do, but yet it is always coming short in my projects. About a year ago, I've tried to implement tests in my React applications with little success, mostly because integrating `enzyme` and configuring it correctly is not that intuitive as a relatively new developer. I want to share my (partly opinionated) approach to JavaScript testing with `jest`, to get you started. In a later post I will demonstrate a way to implement `enzyme` into your React projects.

# The basics of testing JavaScript functions

To get started, you need a npm-project. I don't think I have to explain that, but just in case:

```bash
mkdir awesome-testing-project
cd awesome-testing-project
npm init -y
```

Of course, we need a unit we want to test. What about a method that returns the first element of an array?

```js
module.exports = function firstElement(arr) {
  return arr[1];
};
```

You already spotted a bug, huh? Let's keep it simple for now.

Install and initialize Jest, an open-source testing framework maintained by Facebook. When initializing, you should check every question with `y`.

```bash
npm i --save-dev jest
npx jest --init
```

Next up, we need to define our first test. Conventionally, we create a folder named `__tests__` in the directory of the module we want to test. inside it, there should be a file named `<module>.test.js`. Something like this:

```bash
▶ tree
.
├── package.json
└── src
    ├── __tests__
    │   └── firstElement.test.js
    └── firstElement.js
```

Jest provides global functions that do not need to be imported in a file. A simple test can look like this:

```js
const firstElement = require("../firstElement.js");

test("firstElement gets first element of array", () => {
  expect(firstElement([1, 2])).toBe(1);
});
```

`expect` is another word for `assert`. If you ask me, "Expect firstElement of [1, 2] to be 1" sounds reasonably english, doesn't it? After defining the test, all there is to do left is to run the `npm test` command, which has been created for us by running `npx jest --init` earlier.

```bash
▶ npm test
> jest

 FAIL  src/__tests__/firstElement.test.js
  ✕ firstElement (6ms)

  ● firstElement

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 2

      2 |
      3 | test('firstElement', () => {
    > 4 |   expect(firstElement([1, 2])).toBe(1);
        |                                ^
      5 | });
      6 |

      at Object.<anonymous>.test (src/__tests__/firstElement.test.js:4:32)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.1s
Ran all test suites.
npm ERR! Test failed.  See above for more details.
```

Whoops! Looks like we have found a bug! Let's fix it by adjusting the index of the return value in the firstElement function:

```js
module.exports = function firstElement(arr) {
  return arr[0];
};
```

And after rerunning `npm test`:

```bash
▶ npm test
> jest

 PASS  src/__tests__/firstElement.test.js
  ✓ firstElement (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.666s, estimated 2s
Ran all test suites.
```

Yay, your first unit test! Of course, there is much more to find out about the Jest framework. To see a full guide, read the [official docs](https://jestjs.io/).

I have prepared a [template repository](https://github.com/garritfra/react-parcel-boilerplate) for building react apps. It also uses Jest to run tests, you don't have to worry about a thing! If you found this interesting, consider checking out my other blog posts, and/or check out my [GitHub](https://github.com/garritfra)!