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