score:2

here's a simple example for unit testing react components using mocha, chai, and a jsdom helper, which is used in place of a test runner like karma.

you will need the following dependencies:

"dependencies": {
  "react": "^15.1.0",
  "react-dom": "^15.1.0"
},
"devdependencies": {
  "babel-preset-es2015": "^6.9.0",
  "babel-preset-react": "^6.11.1",
  "babel-register": "^6.9.0",
  "chai": "^3.5.0",
  "jsdom": "^9.3.0",
  "mocha": "^2.5.3"
}

it's also useful to have an npm script that points to mocha - npm run test will execute your tests:

"scripts": {
  "test": "./node_modules/.bin/mocha"
},

after you have your dependencies set up, you'll want a directory structure that looks like this:

.
├── /src
│   └── component-to-test.js
├── /test
│   ├── /unit
│   │   └── component-to-test.spec.js
│   ├── /util
│   │   └── jsdom.js
│   └── mocha.opts
├── .babelrc
└── package.json

we'll start off with your .babelrc file. you'll need babel to transpile your jsx into javascript. if you want to use es6 syntax (highly recommended), babel will help with that too. i've included both of these presets in the devdependencies.

.babelrc:

{
  "presets": ["es2015", "react"]
}

next, we'll look at the jsdom helper. this is needed in order to render react components into an in-memory dom, which is typically handled by a test runner like karma.

jsdom.js:

(function () {
    'use strict';

    var jsdom = require('jsdom'),
        basehtml,
        window;

    if (!global.window) {
        basehtml = '<!doctype html><html><head lang="en"><meta charset="utf-8"><title>tests</title></head><body></body></html>';
        window = jsdom.jsdom(basehtml).defaultview;

        global.window = window;
        global.document = window.document;
        global.navigator = window.navigator;
    }

}());

in order to leverage this jsdom helper for use in our mocha tests, we'll need to set up a mocha.opts file that specifies a few configuration options. we'll add a compiler that will tell babel to pre-process the tests, and we'll require the jsdom helper so react has a dom to use to render components.

mocha.opts:

--compilers js:babel-register
--recursive
--reporter spec
--ui bdd
--require ./test/util/jsdom.js

finally, we can start testing react components. as an example, here is a simple component that we can test.

test-component.js:

import react from 'react';

export default class testcomponent extends react.component {
    render() {
        return (
            <div classname="test-component">here is a test component</div>
        );
    }
}

and here is a test suite that will test this component's markup.

test-component.spec.js:

import testcomponent from '../../src/test-component';
import {expect} from 'chai';

import react from 'react';
import reactdom from 'react-dom';
import reacttestutils from '../../node_modules/react/lib/reacttestutils';

describe('test component', () => {
    let renderednode;

    function rendercomponent() {
        const componentelement = react.createelement(testcomponent),
            renderedelement = reacttestutils.renderintodocument(componentelement);

        renderednode = reactdom.finddomnode(renderedelement);
    }

    beforeeach(() => {
        rendercomponent();
    });

    it('should exist with the correct markup', () => {
        expect(renderednode.tagname).to.equal('div');
        expect(renderednode.classname).to.equal('test-component');
        expect(renderednode.textcontent).to.equal('here is a test component');
    });
});

at this point, the command npm run test should result in a single passing test.

and that's it! if you're looking for more advanced testing techniques, you can completely avoid the need for a jsdom helper and use shallow rendering for your tests. i highly recommend enzyme if you want to take this approach.

let me know if you have any questions!


Related Query

More Query from same tag