Javascript Mock函数不是通过使用enzyme的on-click方法调用的
我只是想测试在组件中的链接上发生单击操作时是否确实调用了函数。我一直收到这个错误Javascript Mock函数不是通过使用enzyme的on-click方法调用的,javascript,reactjs,jestjs,enzyme,Javascript,Reactjs,Jestjs,Enzyme,我只是想测试在组件中的链接上发生单击操作时是否确实调用了函数。我一直收到这个错误 预期已调用模拟函数,但未调用。 但它在浏览器中工作正常 我想可能是测试查找我要求它查找的id时出现了问题,但是使用其他方法,我发现它能够很好地访问元素 组件 import { toggleEditMode } from './otherFile.js' class PersonalInformation extends Component { constructor(props) { super(pro
预期已调用模拟函数,但未调用。
但它在浏览器中工作正常
我想可能是测试查找我要求它查找的id时出现了问题,但是使用其他方法,我发现它能够很好地访问元素
组件
import { toggleEditMode } from './otherFile.js'
class PersonalInformation extends Component {
constructor(props) {
super(props);
this.state = {editMode: false}
this.toggleEditMode = toggleEditMode.bind(this);
}
render(){
const { editMode } = this.state;
return(
<div>
{!editMode &&
<div className="col-md-4 hidden-sm-down">
<a
id="editingToggleButton"
className="display-block"
role="button"
href="javascript:void(0);"
onClick={() => this.toggleEditMode()}
>
<span className="icon icon-sm dls-icon-edit" />
<span className="pad-1-l">Edit</span>
</a>
</div>
}
</div>
)
}
}
测试
describe('edit', () => {
it('should switch to editMode with click', () => {
const toggleEditMode = jest.fn();
const wrapper = mount(
<PersonalInformation
toggleEditMode={toggleEditMode}
/>
);
wrapper.find('#editingToggleButton').simulate('click');
expect(toggleEditMode).toHaveBeenCalled();
});
}
description('edit',()=>{
它('应通过单击切换到编辑模式',()=>{
const-toggleEditMode=jest.fn();
常量包装器=装入(
);
wrapper.find(“#editingToggleButton”).simulate('click');
expect(toggleEditMode).tohaveBeenCall();
});
}
我能够记录它在使用find方法时发现的内容,它返回正确的元素。但我似乎无法理解“它没有被调用”的原因。在测试
文件中,您已将模拟函数分配给道具,但在组件中,您将其用作类函数
因此,在测试文件中,当用户单击HTML元素时,它会触发类函数而不是模拟的函数。Ah这是有道理的,尽管现在我遇到了另一个错误TypeError:Cannot read属性'setState'of undefined
,指的是函数尝试更改状态的时间。我尝试添加了'wrapper.setState'({editMode:false})`before wrapper.find,但它似乎没有什么帮助:(但不应该是这样,正如您声明的wrapper
我所想的那样,函数也绑定到组件。
describe('edit', () => {
it('should switch to editMode with click', () => {
const toggleEditMode = jest.fn();
const wrapper = mount(
<PersonalInformation
toggleEditMode={toggleEditMode}
/>
);
wrapper.find('#editingToggleButton').simulate('click');
expect(toggleEditMode).toHaveBeenCalled();
});
}