Question

我有一个我想测试的简单反应组件。它通过道具回复回调。

<Rectangle Fill="{StaticResource intro2}" MinWidth="1" MinHeight="1" />

看起来如下：

<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

但是，测试运行器会抛出以下错误：

TypeError：this.props.onSearchTermChange不是函数

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

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

反应组分的Enzime测试（浅）

1 个答案: