Метод «имитация» предназначен для запуска на 1 узле. Вместо этого найдено 0. - Шутка/Фермент
Я пытаюсь протестировать onClick, но они не вызываются с использованием реквизита:
вот часть файла .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();
}
вот метод рендеринга file.js
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>
Я видел несколько примеров здесь, в 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();
});
Также как я могу применить тот же метод для первых 2 кликов на основе file.js
Спасибо вам за помощь
Мартин - Я уже сделал это. это не работает.
Хорошо, когда вы shallow компонент, он не будет отображать дочерние элементы, в вашем случае, потому что ваш компонент находится внутри <BrowserRouter>, .add-edit-button недоступен. Попробуйте shallow компонент напрямую или используйте вместо него mount.
@MartinPrins В прошлом я проводил модульное тестирование и смог проверить щелчок внутри <BrowserRouter>. Я попробую еще раз, основываясь на вашем ответе.
Мартин, что я могу улучшить, основываясь на вашем ответе? Я смог пройти с помощью mount и написал следующее в качестве ответа
Я никогда не видел как функцию. Может быть, я буду применять в моем тесте. Не могли бы вы посмотреть на мой ответ? как я могу улучшить его. ? Благодарность
@MartinPrins, не могли бы вы также проверить это stackoverflow.com/questions/54889810/…
Ответы 2
Могу что-то придумать, но как я могу улучшить следующий ответ.
Переключен с мелкого на монтирование для рендеринга дочерних компонентов.
it("should call button click 3 times", () => {
// Reset info from possible previous calls of these mock functions:
wrapper.setProps({
});
wrapper.setState({
});
wrapper.find('.add-edit-button').at(0).simulate("click");
wrapper.find('.add-edit-button').at(1).simulate("click");
wrapper.find('.add-edit-button').at(2).simulate("click");
expect(toJson(wrapper)).toMatchSnapshot();
});
Было бы полезнее, если бы вы показали весь тест.
Если вы хотите использовать shallow, есть способ получить неглубокую оболочку одного из дочерних элементов используя метод dive. Если вам приходится часто оборачивать компоненты в BrowserRouter в тесте, возможно, стоит иметь для этого вспомогательный метод, например:
function shallowWithBrowserRouter(component) {
return shallow(<BrowserRouter>{component}</BrowserRouter>).childAt(0).dive();
}
Насколько я вижу, ошибка выглядит так: когда вы находите кнопку редактирования в тесте, вам не хватает точки, чтобы указать, что это класс CSS.
wrapper.find('.add-edit-button')