How-To Use Jest To Test Vanilla JavaScript Files Without A Framework
## 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
Code
2. Create a jest.config.js file in your working directory with:
Code
const config =
: true,
: 'jsdom',
}
module.exports = config
3. Create a `tests` directory in your working directory
Code
4. Create a test file in your `tests` directory (e.g. `tests/functions.test.js`)
Code
const functions =
4. Create the file to be tested in your working directory (e.g. `functions.js`)
Code
return a + b + a
}
5. Run jest from the command line with:
Code
When you fire that off, you'll get the output from jest that looks something like this:
Code
The process stays open and runs tests as you make changes. Press `q` to exit it.
## The 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