An Introduction to Testing React with Jest

Christopher Patton
2 min readMar 15, 2016

Recently I have been learning Facebook’s React library for a four week thesis project that I am doing at Hack Reactor Remote. One of the takeaways of this project is TDD, test driven development, which provides a way to document expected behavior of the software, provides a safety net for performing refactoring and catches errors early before the code is deployed. With that in mind I embarked upon learning a new testing framework created by Facebook for React called Jest.

Jest was originally created by Facebook to write fast reliable tests for their web chat application. Jest sits on top of the well-known testing suite called Jasmine. What’s unique about Jest is that it allows for automatic mocking using JSDom for running tests in the terminal instead of in the browser. Automatic mocking is useful because it allows you to test your components in in isolation to other components and dependencies and all your dependencies can be mocked.

With all that said I want to walk through a very basic setup and example. To get started, you will first need to create a new directory in you terminal.

mkdir jestExample && cd jestExample

We then need to create a package.json file inside of jestExample, so in the terminal type in:

npm init

--

--

Christopher Patton

I am a software engineer specializing in full-stack web development. With a strong focus on JavaScript, using M.E.A.N and React.js