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); 
});