Как вызвать цель события внутри функции с ферментом - React

Question

  componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside);
    }

    /**
   * Set the wrapper ref
   */
    setWrapperRef(node) {
        this.wrapperRef = node;
    }

    handleClickOutside(event) {
        /* istanbul ignore next */
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
            this.props.clickHandler();
        }
    }

Как вызвать функцию handleClickOutside.Как я должен подражать clickOutside здесь?Пожалуйста, помогите

 it('lets click outside and close dropdown', () => {
        const handleClickOutside = sinon.spy();
        expect(handleClickOutside.called).to.be.true;
        wrapper.unmount();
    });

Answer 1

Предполагая, что это HOC или render prop, который отображает другие компоненты как children (this.props.children) - также ниже приведены тесты Jest и Enzyme, поэтому он может немного отличаться от что вы используете.

Компоненты / __ тест __ / ClickHandler.test.js

const clickHandler = jest.fn()

const initialProps = { 
  clickHandler,
  children: <button className="example">Test</button>
  ...other props
};

const wrapper = shallow(<ClickHandler {...initialProps} />);

describe("Example", () => {
   it('handles clicks inside of the component', () => { // this would test the event lisenter, the class method, and the clickHandler -- slightly overkill 
      const spy = jest.spyOn(wrapper.instance(), 'handleClickOutside');

      wrapper.instance().forceUpdate();
      wrapper.find('button').simulate('click');

      expect(spy).toHaveBeenCalled();
      expect(clickHandler).toHaveBeenCalledTimes(0);
      spy.mockClear();
   });

   it('handles clicks outside of the component', () => { // this is a more straight forward test that assumes the event listener is already working
      const event = { target: <div className="example">Outside Div</div> };
      wrapper.instance().handleClickOutside(event);

      expect(clickHandler).toHaveBeenCalled();
   });

})