Cheat Sheet for Jest and React

November 4th, 2020

A quick reference for setting up testing with Jest in a React App

Whenever I start writing tests, I find myself looking up the same things. So, I decided to write it down and make it easy to find. I hope it's helpful.

If you've never written a test with Jest, I recommend checking out Web Dev Simplified Testing Introduction for a short and simple intro, and certainly the Jest docs.

CRA

Important! I'm using create-react-app as the starter in my project. If you're using something else, please refer to the docs for that system. For example, Gatsby has a different setup so please refer to the Gatsby Testing Docs.

Ok, my quick and simple cheat sheet:

Setup

In package-json, add --coverage to the test script.

"scripts": { "test": "jest --coverage", ...

This will give you back a nice chart for your tests.

Make a babel.config.js file with the following content:

// babel.config.js
module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'] };

When setting up the test, create the test file as:

//<filenameBeingTested>.test.js

import {functionBeingTested} from './filename'
test('functionBeingTested should return value', () => {
  expect(functionBeingTested(args))
  .toBe(return value)  
})

I always just search the Jest docs for the toBe method I want. The names are typically really intuitive and easy to find, like, toBeEqual, toBeLessThan, etc.

I hope this helps you get up and running with simple tests! There are a lot of features and things you can test with Jest, and Jest DOM (which comes packaged with create-react-app).