<commit_before>[![Build Status](https://travis-ci.org/ikr/jsdom-test-browser.svg?branch=master)](https://travis-ci.org/ikr/jsdom-test-browser)

# About

Boilerplate I use to set up [React.js](http://facebook.github.io/react/) components' testing harness
under Node.js, based on the amazing [jsdom.](https://github.com/tmpvar/jsdom)

# Usage

Here's how my typical [Mocha](http://mochajs.org/) test suite for a React component looks.

```javascript    
describe('MyComponentClass', function () {
    'use strict';

    var assert = require('assert'),
        bro = require('jsdom-test-browser'),
        React = require('react'),
        TestUtils = require('react/addons').addons.TestUtils,
        MyComponentClass = require('../src/MyComponentClass');

    // Sometimes the network is slow when fetching jQuery from Google CDN
    // You may not need it that all
    this.timeout(4000);

    before(function () { bro.setUp(); });
    after(function () { bro.tearDown(); });

    describe('element HTML', function () {
        var element;

        beforeEach(function () {
            element = TestUtils.renderIntoDocument(
                React.createElement(MyComponentClass, {value: 42})
            ).getDOMNode();
        });

        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'
            );
        });
    });
});
```

The `TestBrowser` methods `setUp` and `tearDown` **have side effects!** They modify the global
`window` and `document` to make the React's `TestUtils.renderIntoDocument` work. The `setUp` sets
those globals to the jsdom-provided values, and then `tearDown` restores them to their original
state.

As you see from the example above, the [jQuery](http://jquery.com/) API is available at the `bro.$`
member.<commit_msg>Define the new API in the README<commit_after>[![Build Status](https://travis-ci.org/ikr/jsdom-test-browser.svg?branch=master)](https://travis-ci.org/ikr/jsdom-test-browser)

# About

Boilerplate I use to set up [React.js](http://facebook.github.io/react/) components' testing harness
under [Node.js](http://nodejs.org/), based on the amazing [jsdom.](https://github.com/tmpvar/jsdom)

# Usage

Here's how my typical [Mocha](http://mochajs.org/) test suite for a React component looks.

```javascript
describe('MyComponentClass', function () {
    'use strict';

    var assert = require('assert'),

        // Must ALWAYS come BEFORE requiring React
        bro = require('jsdom-test-browser'),

        React = require('react'),
        TestUtils = require('react/addons').addons.TestUtils,
        MyComponentClass = require('../src/MyComponentClass');

    // 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; do it in every suite
    before(function (done) { bro.jQueryify(done); });

    describe('element HTML', function () {
        var element;

        beforeEach(function () {
            element = TestUtils.renderIntoDocument(
                React.createElement(MyComponentClass, {value: 42})
            ).getDOMNode();
        });

        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'
            );
        });
    });
});
```

The `require('jsdom-test-browser')` **has side effects!** It assigns the global `window` and
`document` to make the React's `TestUtils.renderIntoDocument` work.

As you see from the example above, the [jQuery](http://jquery.com/) API is available as the `bro.$`
member.
{'fraction_non_alphanumeric': 0.1432129514321295, 'fraction_numerical': 0.00398505603985056, 'mean_word_length': 2.8284080076263107, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5841665', 'n_tokens_mistral': 1181, 'n_tokens_neox': 1121, 'n_words': 322}