Тестирование асинхронной функции, передаваемой в качестве реквизита от родителя к дочернему
у меня есть родительский компонент, где у меня есть handleClick, который передается как опора дочернему элементу.
// родитель.js
_handleClick = async (buttonName, id) => {
if (buttonName === 'yes'){
... some logic
}else{
... some logic
}
}
<Child
handleClick = {(buttonName, id) => this._handleClick(buttonName, id)}
/>
так что прямо сейчас, как я могу вызвать _handleClick и запустить тестовые примеры. Как мне вызвать метод .
Я пробовал ниже, но не работал должным образом, так как это функция стрелки, и она ожидает два параметра.
//test.js
const wrapper = shallow(<parent />)
expect(wrapper.find('Child').length).toEqual(1)
wrapper.find('Child').prop('handleClick')
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Что ж, вам может понадобиться визуализировать родительский компонент с помощью метода монтирования, а не поверхностного. Это отобразит дочерний элемент, иначе будет отображаться только заполнитель. Затем вы можете захотеть инициировать фактическое событие щелчка, нажав кнопку или что-то еще, что запускает событие в дочернем компоненте.
wrapper.find('Child').prop('handleClick') — это функция, поэтому вы можете просто вызвать ее так:
wrapper.find('Child').prop('handleClick')( /* your args here */ );
Вот упрощенный рабочий пример:
import { shallow } from 'enzyme';
import * as React from 'react';
const Child = () => (<div></div>);
class Parent extends React.Component {
constructor(...args) {
super(...args);
this.state = { val: 'initial' };
}
_handleClick = async (buttonName, id) => {
// ... await something ...
this.setState({ val: buttonName });
}
render() {
return (<Child handleClick = {(buttonName, id) => this._handleClick(buttonName, id)} />);
}
}
test('click handler', async () => {
const wrapper = shallow(<Parent />);
expect(wrapper.find('Child').length).toEqual(1); // Success!
await wrapper.find('Child').prop('handleClick')('the button name'); // <= call the handler
expect(wrapper.state()).toEqual({ val: 'the button name' }); // Success!
});
.prop('handleClick')('newButton', 1). это то, как вы ожидаете передать аргументы?
Да, это сошло бы 'newButton' за buttonName и 1 за id @DILEEPTHOMAS
поэтому с использованием мелкой я не могу проверить это. но в соответствии с примерами модульных тестов я могу вызвать мелко и проверить, что мой родительский компонент не