тестирование асинхронной функции, передаваемой в качестве опоры от родителя к ребенку

Question

У меня есть родительский компонент, где у меня есть handleClick, который передается в качестве опоры для ребенка.

// parent.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')

Answer 1

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!
});

Answer 2

Что ж, вам может понадобиться отрендерить родительский компонент с помощью метода mount, а не мелкого. Это отобразит дочерний элемент, в противном случае будет отображен только заполнитель. Затем вам может потребоваться инициировать фактическое событие нажатия, нажав кнопку или любое другое событие, запускающее событие в дочернем компоненте.