反応成分（浅い）のEnzimeテスト

Question

私はテストしたい簡単な反応成分を持っています。それは、小道具を介してコールバックを受け取ります。

<AnimalSelector onSearchTermChange={Search} /> 

次のように見えます：

import React, { Component } from 'react'; 
class SexSelector extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {sex: ''}; 
} 
render(){ 
    return (<div> 
<input type="radio" name="sex" value="male" id="male" checked={this.state.sex === 'male'} onChange={event => this.onInputChange(event.target.value)} /> 
<label>Male</label> 
<input type="radio" name="sex" value="female" id="female" checked={this.state.sex === 'female'} onChange={event => this.onInputChange(event.target.value)} /> 
<label>Female</label> 
</div>);   
} 
onInputChange(animal){ 
    this.setState({sex}); 
    this.props.onSearchTermChange(sex); 
} 
}; 
export default SexSelector 

私は時にオプションの変更をチェックするための簡単なテストを書いた：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import renderer from 'react-test-renderer'; 
import {shallow} from 'enzyme'; 
import SexSelector from '../components/animal_selector'; 
it('male option changes state sex to male',() => { 
const wrapper = shallow(<SexSelector onSearchTermChange="void()"/>); 
// manually trigger the callback 
wrapper.instance().onInputChange('male'); 
expect(wrapper.state().sex).toBe('male'); 
}); 

はしかし、テストランナーは、次のエラーがスローされます。

TypeError：this.props.onSearchTermChangeは関数ではありません

at SexSelector.onInputChange (src/components/sex_selector.js:20:15) 
    at Object.<anonymous> (src/test/sexSelector.test.js:31:22) 
    at node_modules/p-map/index.js:42:16 
    at process._tickCallback (node.js:369:9) 

Jest/Enzimeでは、親なしでコンポーネントをテストできますか？コールバックをバイパスする適切な方法はありますか？これは正しいのですか？

Answer 1

"void()"は文字列としてレンダリングするつもりです。空の関数ではありません。いずれにしても、それを行う最良の方法ではありません。

これの代わりに、スパイを渡してください。

ここでスパイを作成するにはexpect assertionsを使用しています。代わりにsinonなどを使用できます。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import renderer from 'react-test-renderer'; 
import {shallow} from 'enzyme'; 
import SexSelector from '../components/animal_selector'; 
import expect from 'expect'; 

it('male option changes state sex to male',() => { 
    const spy = expect.createSpy(); 
    const wrapper = shallow(<SexSelector onSearchTermChange={spy} />); 
    const maleInput = wrapper.find('#male'); 
    const mockEvent = {}; 

    maleInput.simulate('change', mockEvent); 

    expect(wrapper.state().sex).toBe('male'); 
    expect(spy).toHaveBeenCalledWith(mockEvent); 
});