酶的Simulation（）不会更改onChange事件的输出

Question

我有这个组件和一些测试：

从'react'导入React； 从'prop-types'导入PropTypes;

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;

测试：

import React from 'react';
import {shallow} from 'enzyme';
import SubList from '../components/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');
});

测试最后一个测试一直失败，我很确定这是expect(subSelectFn.mock.calls.length).toEqual(1); 特别。 我也很确定这意味着失败了酶的simulate（）。 我尝试过将它传递给第二个（'option'）。at（'1'），因为（'option'）。first（）是空白，还有（'select'）如您在此处看到的。 我已经在文档中看到了Simulate（）的常见陷阱，不确定是否其中之一是发生在我身上的事情？

我在控制台中收到的测试失败消息是

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

expect(received).toEqual(expected)

Expected value to equal:
  1
Received:
  0

Answer 1

您正在使用'click'进行模拟。 相反，请尝试以下操作：

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

Answer 2

@patrick是正确的，对此我感到困惑，最初使用了另一种事件类型，但是正确的是更改。

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

在组件中，确保为每个选项设置一个value属性

<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>

Answer 3

我发现以下变体有效：

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