I have this ponent and some tests:

import React from 'react'; import PropTypes from 'prop-types';

function SubList (props) {
    var subways = ['', '1', '2', '3', '4', '5', '6', 
    'S', 'A', 'C', 'E', 'B', 'D', 'F', 'M', 'N', 'Q', 'R', 'L', 'G']
    return (
        <select onChange={props.onSubSelect}>
            {
                subways.map(subway =>
                    <option key={subway}>
                        {subway}
                    </option>
                )
            }
        </select>
    )
}
SubList.PropTypes = {
    onSubSelect: React.PropTypes.func.isRequired
};

export default SubList;

Tests:

import React from 'react';
import {shallow} from 'enzyme';
import SubList from '../ponents/SubList';

let subSelectFn, wrapper;

beforeEach(() => {
    subSelectFn = jest.fn();
    wrapper = shallow(<SubList onSubSelect={subSelectFn}/>);
});

afterEach(() => {
    subSelectFn.mockReset();
});

it('should render a list of subways as an dropdown menu', () => {
    expect(wrapper.find('option').length).toBe(20);
});

it('should display the subway line in each `<option>` element', 
() => {
    const secondElement = wrapper.find('option').at(1);
    expect(secondElement.contains('1')).toEqual(true);
});

it('should call `props.onSubSelect` when an `option` is clicked', 
() => {
    // Expect that no calls have been made yet
    expect(subSelectFn.mock.calls.length).toEqual(0);

    // Click the <option>
    wrapper.find('select').simulate('click');

    // Check that the function has been called
    expect(subSelectFn.mock.calls.length).toEqual(1);

    // Check that the function was called with the right arguments
    expect(subSelectFn.mock.calls[0][0]).toEqual('1');
});

The test last test keeps failing, and I'm pretty sure it's expect(subSelectFn.mock.calls.length).toEqual(1); specifically. I'm also pretty sure that means that what is failing Enzyme's simulate(). I've tried passing it the second ('option').at('1') because ('option').first() is blank and also ('select') as you see here. I've seen simulate()'s mon gotchas in the docs and not sure if one of those is what's happening to me?

The message I'm getting in my console for the failed test is

● should call 'props.onSubSelect' when an 'option' is clicked

expect(received).toEqual(expected)

Expected value to equal:
  1
Received:
  0

I have this ponent and some tests:

import React from 'react'; import PropTypes from 'prop-types';

function SubList (props) {
    var subways = ['', '1', '2', '3', '4', '5', '6', 
    'S', 'A', 'C', 'E', 'B', 'D', 'F', 'M', 'N', 'Q', 'R', 'L', 'G']
    return (
        <select onChange={props.onSubSelect}>
            {
                subways.map(subway =>
                    <option key={subway}>
                        {subway}
                    </option>
                )
            }
        </select>
    )
}
SubList.PropTypes = {
    onSubSelect: React.PropTypes.func.isRequired
};

export default SubList;

Tests:

import React from 'react';
import {shallow} from 'enzyme';
import SubList from '../ponents/SubList';

let subSelectFn, wrapper;

beforeEach(() => {
    subSelectFn = jest.fn();
    wrapper = shallow(<SubList onSubSelect={subSelectFn}/>);
});

afterEach(() => {
    subSelectFn.mockReset();
});

it('should render a list of subways as an dropdown menu', () => {
    expect(wrapper.find('option').length).toBe(20);
});

it('should display the subway line in each `<option>` element', 
() => {
    const secondElement = wrapper.find('option').at(1);
    expect(secondElement.contains('1')).toEqual(true);
});

it('should call `props.onSubSelect` when an `option` is clicked', 
() => {
    // Expect that no calls have been made yet
    expect(subSelectFn.mock.calls.length).toEqual(0);

    // Click the <option>
    wrapper.find('select').simulate('click');

    // Check that the function has been called
    expect(subSelectFn.mock.calls.length).toEqual(1);

    // Check that the function was called with the right arguments
    expect(subSelectFn.mock.calls[0][0]).toEqual('1');
});

The test last test keeps failing, and I'm pretty sure it's expect(subSelectFn.mock.calls.length).toEqual(1); specifically. I'm also pretty sure that means that what is failing Enzyme's simulate(). I've tried passing it the second ('option').at('1') because ('option').first() is blank and also ('select') as you see here. I've seen simulate()'s mon gotchas in the docs and not sure if one of those is what's happening to me?

The message I'm getting in my console for the failed test is

● should call 'props.onSubSelect' when an 'option' is clicked

expect(received).toEqual(expected)

Expected value to equal:
  1
Received:
  0

• javascript
• reactjs
• enzyme
• jestjs

3 Answers 3

You're using 'click' for your simulate. Instead, try this:

wrapper.find('select').simulate('change', 1);

@patrick is correct, I got confused by this and initially used a different event type, but the correct one is change.

wrapper.find('select').simulate('change', { target: { value: '1' } });

In the ponent ensure that you set a value attribute to each option

<select className="form-control" id="select-box" name="select-box" 
        onChange={(e) => this.handleChange(e.target.value)}>
          <option>Select an option</option>
          {
            this.props.options.map((o, index) => {
              return (
                <option key={index} value={o}>
                  {o}
                </option>
              );
            })
          }
</select>

I found the following variant working:

wrapper.find('select').simulate('change', { subway: '1' });