Blog

{/* Before I begin this post is just a how to setup up your project to run unit tests, i’ll probably go over some examples of actual unit tests in a later post. */}

Hello again

So you’re wondering how to make some sweet Unit tests, well so was I. Spoke to my FrontEndFriends, got some high level guidance and I gave it ago to implement it myself.

Here is how to setup up your project with Jest and enzyme.

First thing you’ll need to do is install jest, enzyme and enzyme-adapter-react-16 as a `devDependency`.

So go on install that sucker using npm install jest, enzyme and enzyme-adapter-react-16

npm install jest enzyme enzyme-adapter-react-16 --save-dev

Once all the little packages are installed, you will need to setup the following below.
– add a test-setup.js file
– Add the test-setup.js file to jest.config.json

What does this test-setup.js file need and where does it go? You can use my project as a reference. I made a folder called .jest and added two files:
– shim.js
– test-setup.js

You might be asking “what the heck is a shim folder and what is it doing here?” If you don’t have this file your application starts to complain, so to stop the whinging you’ll need a shim.js in your .jest folder.

Luckily shim.js just consists of the following code:

global.requestAnimationFrame = (callback) => {
setTimeout(callback, 0);
};

Finally, we get to add our test-setup.js here is how mine looks:

// eslint-disable-next-line import/no-extraneous-dependencies
import { configure } from 'enzyme';
// eslint-disable-next-line import/no-extraneous-dependencies
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

The comments are optional of course.

Now for the next step, that is take test-setup.js file add it to jest.config.json. So navigate to your root directory (where you see all your friends such as package.json and what not and create a file called jest.config.json and add the following code:

{
"verbose": true,
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(css|jpg|png)$": "/empty-module.js"
},
"setupFiles": [
"/.jest/shim.js",
"/.jest/test-setup.js"
]

Once all is said and done, add this little guy to your package.json to make running unit tests just a little bit easier

Add a script for `jest`: `jest –config=./jest.config.json –coverage`

Now you should be fully setup if you are running into any problems these references should add some extra guidance happy unit testing!

If you want to do some more reading on unit tests feel free to check out these references:
Jest
Enzyme