Necessarily Precedes Mischief
    Wondering what’s next for npm?Check out our public roadmap! »

    jsdom-test-browser

    4.0.2 • Public • Published

    Build Status

    About

    Boilerplate I use to set up React.js components' testing harness under Node.js, based on the amazing jsdom.

    Compatibility

    The latest version depends on jsdom v6, which requires Node v4+. For a version compatible with Node v0.10 and v0.12 please install ^3.0.0.

    Usage

    $ npm install --save-dev jsdom-test-browser

    Here's a sample Mocha test suite for a React component.

    describe('MyComponentClass', function () {
        'use strict';
     
        var bro = require('jsdom-test-browser'),
            assert = require('assert'),
            React = require('react'),
            TestUtils = require('react/addons').addons.TestUtils,
            MyComponentClass = require('../src/MyComponentClass');
     
        // Prepare a new global browser instance. It (re)sets the
        // global.window, global.document, global.navigator (closing the old window, if needed),
        // so that TestUtils.renderIntoDocument() can work with an actual DOM.
        //
        before(function (done) { bro.newBrowser(done); });
     
        // If the network is slow when fetching jQuery from Google CDN.
        // You may not need it that at all.
        //
        this.timeout(4000);
     
        // Load jQuery into jsdom. Is idempotent; can be called in multiple suites relying
        // on the same jsdom browser instance.
        // If your tests don't depend on jQuery (bro.$), omit that step.
        //
        before(function (done) { bro.jQueryify(done); });
     
        describe('element HTML', function () {
            var element;
     
            beforeEach(function () {
                element = TestUtils.renderIntoDocument(
                    React.createElement(MyComponentClass, {value: 42})
                ).getDOMNode();
            });
     
            it('is a TABLE', function () {
                assert.strictEqual(element.tagName, 'TABLE');
            }));
     
            it('has the top class name assigned', function () {
                assert(bro.$(element).hasClass('my'));
            });
     
            it('displays the value somewhere in the markup', function () {
                assert.strictEqual(
                    bro.$('.some-container .value-holder', element).val(),
                    '42'
                );
            });
        });
    });

    On jQueryify

    As jsdom supports the modern browser DOM API, I'd advise against using jQueryify until it's absolutely necessary: say, when you rely on a jQuery plugin inside of a React component. Otherwise, querySelector, textContent, and friends work just fine.

    Central bootstrap

    With Gulp it would look something like that:

     
    gulp.task('jsdom', function (callback) {
        bro.newBrowser(callback);
    });
     
    gulp.task('test', ['build', 'jsdom'], function () {
        ...
    });

    Order of Node module imports

    Please note that bro.newBrowser(callback) should be called before React is imported/required. That's because React probes its execution environment right away when is's imported.

    API

    newBrowser(callback)

    jQueryify(callback)

    $

    loadJs(uri, callback)

    Install

    npm i jsdom-test-browser

    DownloadsWeekly Downloads

    22

    Version

    4.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar