The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

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

TODO: Pull subtitle into page object

## 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_start_default_section code_end_default_section

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

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

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

-- p

## The Issue

-- p

I'm building a plain old html and vanilla javascript site. I decided I wanted to setup a test suite and picked <<link|Jest|https://jestjs.io/>> 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.

-- p

## The Process

-- p

1. Install jest globally

-- code/
-- bash

npm install -g jest

-- /code

-- p

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

-- code/
-- javascript

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

module.exports = config

-- /code

-- p

3. Create a `tests` directory in your working directory

-- code/
-- bash

mkdir tests

-- /code

-- p

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

-- code/
-- javascript

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

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

-- /code

-- p

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

-- code/
-- javascript

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

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

-- /code

-- p

5. Run jest from the command line with:

-- code/
-- bash

jest --watchAll

-- /code

-- p

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

-- code/
-- bash

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.

-- /code

-- p

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

-- p

## The Notes

-- p

- 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 <<link|are here|https://jestjs.io/docs/configuration>>
- 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 <<link|examples on the jest site|https://jestjs.io/docs/getting-started) 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)`>>


-- categories
-- JavaScript
-- TDD

-- metadata
-- date: 2022-01-20 11:42:24
-- id: 23yct7ah
-- status: published
-- type: post
-- SCRUBBED_NEO: false
-- site: aws