Enzymeのsimulate（）はonChangeイベントの出力を変更しません

Question

私はこのコンポーネントといくつかのテストを持っています：

import React from '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);だと確信しています。私はまた、それが失敗している酵素がシミュレートしていることを意味していることは確かです。 （ 'option'）。first（）は空白で、 '（select）'のため、ここでは2番目（ 'option'）のat（ '1'）を渡してみました。私はsimulate（）のよくある問題をドキュメントで見てきましたが、そのうちの1つが私に起こっているのかどうかは分かりません。

私は失敗したテストのための私のコンソールで取得していたメッセージは、あなたがあなたのシミュレートのための'click'を使用している

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

expect(received).toEqual(expected) 

Expected value to equal: 
    1 
Received: 
    0 

Answer 1

です。代わりに、これを試してみてください。

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

Answer 2

@patrickが正しいですが、私はこれで混乱し、当初は別のイベントタイプを使用しますが、正しいものは変更されてしまいました。コンポーネントで

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

あなたは、各オプション

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