javascript - Enzyme's simulate() not changing output for onChange event - Stack Overflow

admin管理员组

文章数量:1415697

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

Share Improve this question Follow asked Sep 28, 2017 at 21:53 bkulabkula 56933 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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' });

本文标签： javascriptEnzyme39s simulate() not changing output for onChange eventStack Overflow