Testing React Select component : <p><a href="https://github.com/JedWatson/react-select" rel="noreferrer">https://github.com/JedWatson/react-select</a></p>

<p>I would like to use React-Select react component, but I need to add tests.</p>

<p>I've tried several options I found with google, but nothing seems to work. I have the code below, but it's not causing a change event. I have been able to add a focus event, which adds 'is-focussed' class, but the 'is-open' class is still missing.</p>

<p>I have used: <a href="https://github.com/JedWatson/react-select/blob/master/test/Select-test.js" rel="noreferrer">https://github.com/JedWatson/react-select/blob/master/test/Select-test.js</a> as a reference</p>

<p>I have tried to use a change event only on the input field, but this has not helped either. I noticed there is a <code>onInputChange={this.change}</code> for the select.</p>

<p><strong>Test</strong></p>

<pre><code>import Home from '../../src/components/home';
import { mount } from 'enzyme'

describe('Home', () =&gt; {

it("renders home", () =&gt; {

    const component = mount(&lt;Home/&gt;);

    // default class on .Select div
    // "Select foobar Select--single is-searchable"

    const select = component.find('.Select');

    // After focus event
    // "Select foobar Select--single is-searchable is-focussed"
    // missing is-open
    TestUtils.Simulate.focus(select.find('input'));

    //this is not working
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 40, key: 'ArrowDown' });
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 13, key: 'Enter' });

    // as per code below I expect the h2 to have the select value in it eg 'feaure'

});
});
</code></pre>

<p><strong>Component under test</strong></p>

<pre><code>import React, { Component } from 'react';
import Select from 'react-select';

class Home extends Component {
constructor(props) {
    super(props);

    this.state = {
        message: "Please select option"};
    this.change = this.change.bind(this);
}

change(event) {

    if(event.value) {
        this.setState({message: event.label});
    }
}

render () {

    const options = [ {label: 'bug', value: 1} , {label: 'feature', value: 2 }, {label: 'documents', value: 3}, {label: 'discussion', value: 4}];

    return (
      &lt;div className='content xs-full-height'&gt;
          &lt;div&gt;
              &lt;h2&gt;{this.state.message}&lt;/h2&gt;

              &lt;Select
                  name="select"
                  value={this.state.message}
                  options={options}
                  onInputChange={this.change}
                  onChange={this.change}
              /&gt;

          &lt;/div&gt;
        &lt;/div&gt;
    );
}
}

export default Home;
</code></pre>

<p><strong>Command line</strong>
To run test I do:</p>

<pre><code>&gt;&gt; npm run test
</code></pre>

<p>and in package.js I have this script:</p>

<pre><code>"test": "mocha --compilers js:babel-core/register -w test/browser.js ./new",
</code></pre>

<p><strong>Test setup</strong></p>

<p>and browser.js is:</p>

<pre><code>import 'babel-register';
import jsdom from 'jsdom';

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom.jsdom('&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) =&gt; {
   if (typeof global[property] === 'undefined') {
       exposedProperties.push(property);
       global[property] = document.defaultView[property];
   }
});

global.navigator = {
    userAgent: 'node.js'
};
</code></pre>

<p>I have also tried using methods for testing outlined here: <a href="https://github.com/StephenGrider/ReduxSimpleStarter" rel="noreferrer">https://github.com/StephenGrider/ReduxSimpleStarter</a></p>

<p>Any help will be greatly appreciated</p>
