How-To Use Jest To Test Vanilla JavaScript Files Without A Framework

January 2022

# The Issue

I'm building a plain old html and vanilla javascript site. I decided I wanted to setup a test suite and picked Jest since it was the first search result. The Jest page says "It works with projects using: Babel, TypeScript, Node, React, Angular, Vue, and more!" It took a little hunting to figure out how to run it without using any of those frameworks. Here's what I ended up with. It provides jest on the command line for vanilla javascript testing.

# The Process

1. Install jest globally

npm install -g jest

2. Create a jest.config.js file in your working directory with:

const config = {
  verbose: true,
  testEnvironment: 'jsdom',
}

module.exports = config

3. Create a tests directory in your working directory

mkdir tests

4. Create a test file in your tests directory (e.g. `tests/functions.test.js`)

const functions = require('../functions')

test('addition works', () => {
  expect(functions.sum(1, 2)).toBe(3)
})

4. Create the file to be tested in your working directory (e.g. `functions.js`)

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

if (typeof module !== 'undefined') {
  module.exports.sum = sum
}

5. Run jest from the command line with:

jest --watchAll

When you fire that off, you'll get the output from jest that looks something like this:

PASS  ./functions.test.js
  ✓ addition works (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.593 s
Ran all test suites.

The process stays open and runs tests as you make changes. Press q to exit it.

Notes

You only need to do the first step (where you install jest globally) once
The jest command hangs if you try to run it without a configuration (e.g. `jest.config.js`) file
Jest uses a Node environment by default. The testEnvironment: 'jsdom' line in the jest.config.js file switches to JSDOM which allows you to use things like `document.addEventListener('DOMContentLoaded', function () {}`
More details on the configuration options are here
The if (typeof module !== 'undefined') check is to prevent a Uncaught ReferenceError: module is not defined error when the file is used in the browser
Use jest instead of jest --watchAll to do a single run instead of watching files
If you're in a git repo, you can also do jest --watch instead of jest --watchAll to focus on files that are in the repo
The examples on the jest site only export one function per file. With the code above, you can test multiple functions in a single file (e.g. you could add a function called minus, export it with module.exports.minus = minus, and test it with expect(functions.minus(2, 1)).toBe(1)

end of line