Javascript React单元测试匿名函数
我正在尝试测试一个onChange匿名函数,它会更改文本框中的一个值。我想验证一下,如果调用了onChange中的函数,状态是否会改变。函数本身很简单:Javascript React单元测试匿名函数,javascript,reactjs,unit-testing,jestjs,enzyme,Javascript,Reactjs,Unit Testing,Jestjs,Enzyme,我正在尝试测试一个onChange匿名函数,它会更改文本框中的一个值。我想验证一下,如果调用了onChange中的函数,状态是否会改变。函数本身很简单: onChange={(e) => this.setState({someState: e.value})} 如果函数有名称,我将执行以下操作: test('myFunction should change someState value', () => { const wrap
onChange={(e) => this.setState({someState: e.value})}
如果函数有名称,我将执行以下操作:
test('myFunction should change someState value', () => {
const wrapper = shallow(<MyComponent/>);
const instance = wrapper.instance();
const mockEvent = {
target:{
value: "some value in textbox"
}
};
const expectedValue = "some value in textbox";
instance.myFunction(mockEvent);
expect(wrapper.state().someState).toEqual(expectedValue)
});
test('myFunction应该更改someState值',()=>{
常量包装器=浅();
const instance=wrapper.instance();
常量mockEvent={
目标:{
值:“文本框中的某些值”
}
};
const expectedValue=“文本框中的某个值”;
myFunction(mockEvent);
expect(wrapper.state().someState).toEqual(expectedValue)
});
由于函数是匿名的,我不知道如何用实例调用它。我不想给函数起名字,因为我不想让测试影响我的代码。什么是好的解决方案?有两种方法来测试这个案例。例如
index.tsx
:
import React,{Component}来自'React';
导出默认类MyComponent扩展组件{
建造师(道具){
超级(道具);
此.state={
someValue:“”,
};
}
render(){
返回(
this.setState({someValue:e.target.value})}>
);
}
}
index.test.tsx
:
从“/”导入MyComponent;
从“酶”导入{shall};
从“React”导入React;
描述('61597604',()=>{
它('应该通过',()=>{
常量包装器=浅();
const-mEvent={target:{value:'ok'}};
find('input').simulate('change',mEvent);
expect(wrapper.state()).toEqual({someValue:'ok'});
});
它('应该通过2',()=>{
常量包装器=浅();
const input=wrapper.find('input').getElement();
const-mEvent={target:{value:'ok'}};
输入.props.onChange(mEvent);
expect(wrapper.state()).toEqual({someValue:'ok'});
});
});
100%覆盖率的单元测试结果:
PASS stackoverflow/61597604/index.test.tsx(8.059s)
61597604
✓ 应通过(13毫秒)
✓ 应通过2(1ms)
-----------|---------|----------|---------|---------|-------------------
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s
-----------|---------|----------|---------|---------|-------------------
所有文件| 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
测试套件:1个通过,共1个
测试:2次通过,共2次
快照:共0个
时间:9.213秒
当someState
发生变化时,组件的表示形式是否会在视觉上发生变化?一段文字或列表或其他东西?这是一种以用户为中心的方式间接断言状态已更改的方法。@在本例中,只有文本框中的文本应更改。您需要触发更改事件,然后可以断言state()。某些状态已更改,或者DOM已更改。我不想给函数起名字,因为我不想让测试影响我的代码——出于可测试性的原因,这样做根本不是一件好事,另一件好事是,每次将相同的道具传递给onChange
可以实现匿名函数无法实现的优化。