Enzyme의 simulate()는 onChange 이벤트에 대한 출력을 변경하지 않습니다.

Question

이 구성 요소와 일부 테스트는 다음과 같습니다.

import reactact 'react'; 'prop-types'의 PropType을 가져 오십시오.

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')이기 때문에 두 번째 ('option'). at ('1')을 전달하려고했습니다. 나는 simulate()의 공통점을 문서에서 보았고, 그 중 하나가 나에게 무슨 일이 일어나고 있는지 확실하지 않습니까? 당신은 당신의 시뮬레이션에 대한 '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>