Up & Running with JEST
Tags: jest, react
Published: 2019-04-28 13:50:13

---
title: Up & Running with JEST
published: true
description: Learn how to test React Components with JEST
tags: JEST, React
cover_image: https://images.unsplash.com/photo-1512851685250-bfa0aa982a1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1789&q=80
---

## Goal of this Article

The goal of this article is to give you the fundamentals of testing a React component with Jest, with this knowledge you can hit the ground running when you start testing your own components.  Ready? Let's start.

## Sample Component
I have created a simple Card component in Codesandbox.

![Picture of Component](https://thepracticaldev.s3.amazonaws.com/i/06fbikl6am3h6gz4ph4f.png)

This component accepts a prop which handles when the `Discover` button is clicked.

Here is the Codesandbox so you can follow along:
{% codesandbox 18wyxn60zl %}

Codesandbox has still a ways to go when it comes to testing, I failed even getting a snapshot test to work so I recommend [cloning down my repo here](https://github.com/PaulRyan17/Jest-Testing-Example) and following along on your local machine.

## Installing JEST
The first thing we need to do before we can start using Jest is to install it.  To install Jest run the following command:
`npm install -D jest react-test-renderer`

Thankfully, `create-react-app` has this handled so we can just run `npm test` to run our tests :)


## Creating our tests directory
Jest looks for tests in directories named `__tests__`, add the `__tests__` directory to your `Card` component.

Next thing we need to do is to create a test file in the `__tests__` directory, we will call our file `card.test.js`

Your folder structure should now look like the following:

![Folder Structure](https://thepracticaldev.s3.amazonaws.com/i/3heck30dtlv6e8k8k5cu.png)

## Creating a snapshot test
First run the command:
`npm test`

This will start Jest in watch mode, so any time we make changes our tests will rereun.

The first test we will write is a snapshot test.

Add the following code to your `card.test.js` file:
```javascript
import React from "react";
import Card from "..";
import Renderer from "react-test-renderer";

it("renders correctly", () => {
  const tree = Renderer.create(<Card />).toJSON();
  expect(tree).toMatchSnapshot();
});

```


This will create a JSON snapshot of our component in a directory called `__snapshots__`, which means anytime the component changes this test will fail.  Go ahead and change something in the component such as the text and you will get the following:
![Image of failure](https://thepracticaldev.s3.amazonaws.com/i/2163ds5mwqv9lbo98uw1.png)

To remedy this, you simply need to update the snapshot by just pressing `u`.

## Testing the callback function
We are now going to use the library `enzyme` to help us out, it gives us a lot of handy utils and saves us a lot of headaches.

We need to install a few dependencies:
`npm install enzyme enzyme-adapter-react-16 --save-dev`

Now add the following to the top of your test file:
```javascript
import Adapter from 'enzyme-adapter-react-16';
import { mount, configure } from 'enzyme'
configure({adapter: new Adapter()});
```

For Enzyme to work we need to create an adapter, the adapter gets Enzyme working with your React version i.e. React 16.

Now let's add a new test:
```javascript
it('triggers the callback function', ()=>{

})
```

Now let's fill out the body, I have commented each line so it is easy to understand.
```javascript
// in order to test the callback function we first need to mock it
const onClickCallback = jest.fn()
// pass our mock function as the prop the Card
let card = mount(<Card handleClick={onClickCallback} />)
// find out button i.e. the button that triggers the callback and click it
const button = card.find('button').simulate('click')
// our mock function should have been called once
expect(onClickCallback).toHaveBeenCalledTimes(1)
```

## Test that the correct value is passed from the callback function
Our callback function passes back the hardcoded string `discover`, let's test to make sure that this is being passed correctly.

The function is similar to above except for the last line:
```javascript
it('callback function is the passed the string discover', ()=>{
  // in order to test the callback function we first need to mock it
  const onClickCallback = jest.fn()
  // pass our mock function as the prop the Card
  let card = mount(<Card handleClick={onClickCallback} />)
  // find out button i.e. the button that triggers the callback and click it
  const button = card.find('button').simulate('click')
  // test to see if our function was called with the right param
  expect(onClickCallback).toHaveBeenCalledWith('discover')
})
```

Thanks for reading.

I hope you gained some knowledge, I will continue adding to this article so consider this draft 1 :)

Also I am a big fan of twitter and really close to 100 followers, [so follow me there](https://twitter.com/PaulRyan7) if you want, thanks.