Unit testing React components with Jest

Jest is a unit test framework for testing React apps. The Getting Started guide is pretty much all you need to get started. If you’ve created your project using create-react-app then you’re already setup, just run ‘npm test’ and a runner will test up that repeatedly runs your tests as you make code or test changes.

create-react-app also creates a sample test for the sample App.js component. This is a good starting point to follow for other tests:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App/>, div);
});

To test the results of rendering a component, the enzyme library allows you to easily capture the output from a render, and then query the results. For example:

import React from 'react';
import ReactDOM from 'react-dom';
import {shallow, mount} from 'enzyme';
import Calculator from '../Components/CalculatorComponent';
it('renders with result 3', () => {
    const result = mount(<Calculator value1="1" value2="2" />);
    result.find('button').simulate('click');
    const buttonResult = result.find("#result").first();
    expect(buttonResult.text()).toEqual("3");
});

The CalculatorComponent I’m testing here is the one from my previous React post.

WebStorm: adding library support for Jasmine

WebStorm provides support to download libraries to provide code complete for a huge number of popular libraries.

I tried to add a Library for Jasmine manually, but really wasn’t sure where to point to, I tried pointing to here, but this didn’t seem to work for me:

/usr/local/lib/node_modules/karma-jasmine

If you press the Download button on the right, you can search for a known library and install it like this:

I think part of what I was looking for was jasmine and karma-jasmine, but installing from the Download option got these setup for me, and now I’ve got the code complete in my Jasmine tests that I was looking for.

Webstorm: Adding karma.conf.js to an existing Javascript project

To setup an existing HTML/Javascript project in Webstorm to use Jasmine and Karma:

  • click the Terminal tab in the bottom left
  • Enter: karma init karma.conf.js
  • When prompted, answer the setup questions:
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> 

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> js/*.js
> test/**/*Spec.js
WARN [init]: There is no file matching this pattern.

> 

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Next, right-click the karma.conf.js file in the Project files area, and select ‘Create karma.conf.js’ – the dialog should point to your local karma and node.js installs, select the defaults.

Run the file and Karma starts up. Good to go!

AngularJS and unit testing: Jasmine, Karma and mocks

I spent some time a while back getting up to speed with unit test approaches with AngularJS, but it’s been a while and I need to retrace my steps to pick it up again.

For (my) future reference, here’s a list of the notes I had before:

To pick this up again, here’s my reading list of some useful articles to review: