NOTE: Under Construction - I'm in the middle of upgrading my site and lots of stuff is kinda broken. Please forgive the mess.

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.

  • 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)

═══ § ═══