use*_*ACT 5 unit-testing reactjs jestjs enzyme
我正在尝试测试 onClick 但它们没有被使用道具调用:
这是 file.js 的一部分
handleSystemClick = () => {
// var message = All unsaved changes will be lost.`
confirmAlert({
title: 'Confirm Navigation',
message: ' All unsaved changes will be lost.',
childrenElement: () => <div></div>,
confirmLabel: 'Confirm',
cancelLabel: 'Cancel',
onConfirm: () => {this.setState({ toSystemEntitlments: true})},
onCancel: () => {},
})
}
handleCancelClick = () => {
window.history.back();
}
Run Code Online (Sandbox Code Playgroud)
这是 file.js 的 render 方法
render()
return(
<div className='add-edit-button' id= 'test1' onClick={() => {this.handleSystemClick()}}>System</div>
<div className='add-edit-button' onClick={() => {this.handleCancelClick()}}>Cancel</div>
<div className='add-edit-button' onClick={() => {this.handleSave()}}>Save</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我在 stackoverflow 上看到了一些例子,我尝试应用以下内容:
// jest mock functions (mocks this.props.func)
// defining this.props
const baseProps = {
describe(' FunctionalEntitlement Test', () => {
let wrapper;
let tree;
beforeEach(() => wrapper = shallow(<BrowserRouter><Component {...baseProps} /></BrowserRouter>));
it("should call handlesave function on button click", () => {
// Reset info from possible previous calls of these mock functions:
baseProps.handleSave.mockClear();
wrapper.setProps({
});
wrapper.setState({ getINITIAL_STATE:""
});
wrapper.find('.add-edit-button').at(0).simulate("click");
expect(baseProps.handleSave).toHaveBeenCalled();
expect(toJson(wrapper)).toMatchSnapshot();
Run Code Online (Sandbox Code Playgroud)
});
另外,我如何根据 file.js 对前两次点击应用相同的方法
感谢您的帮助
小智 2
如果您想使用,shallow有一种方法可以使用该dive方法获取其中一个子级的浅包装。如果您必须在测试中频繁地包装组件BrowserRouter,那么也许有一个辅助方法是值得的,例如:
function shallowWithBrowserRouter(component) {
return shallow(<BrowserRouter>{component}</BrowserRouter>).childAt(0).dive();
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
17183 次 |
| 最近记录: |