我试图测试在组件中的链接上发生单击动作时确实确实调用了一个函数。我不断收到错误Expected mock function to have been called, but it was not called.
但是它在浏览器中可以正常工作。
我以为测试可能找不到我要它查找的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>
)
}
}
toggleEdit方法
export function toggleEditMode() {
this.setState({ editMode: !this.state.editMode })
}
考试
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();
});
}
使用find方法时,我能够记录它所找到的内容,并且它返回正确的元素。但我似乎无法弄清楚“未被调用”的方式。
最佳答案
在测试file
中,您已将模拟函数分配给props
,但在component
中,您将其用作类函数。
因此,在测试文件中,当用户单击HTML元素时,它将触发类函数,而不是模拟函数。