Javascript React单元测试匿名函数

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匿名函数,它会更改文本框中的一个值。我想验证一下,如果调用了onChange中的函数,状态是否会改变。函数本身很简单:

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
可以实现匿名函数无法实现的优化。