Тестирование единиц измерения

Используя код этот ответ, чтобы решить щелчок вне компонента:

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

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

setWrapperRef(node) {
    this.wrapperRef = node;
}

handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        this.props.actions.something() // Eg. closes modal
    }
}

Я не могу понять, как unit test несчастливый путь, чтобы предупреждение не запускалось, что у меня до сих пор:

it('Handles click outside of component', () => {
  props = {
    actions: {
      something: jest.fn(),
    }
  }
  const wrapper = mount(
    <Component {... props} />,
  )
  expect(props.actions.something.mock.calls.length).toBe(0)

  // Happy path should trigger mock

  wrapper.instance().handleClick({
    target: 'outside',
  })

  expect(props.actions.something.mock.calls.length).toBe(1)  //true

  // Unhappy path should not trigger mock here ???

  expect(props.actions.something.mock.calls.length).toBe(1)
})

Я пробовал:

отправка через wrapper.html()
.find ing a node и отправка (не издевается над event.target)
.simulate ing click для элемента внутри (не вызывает прослушиватель событий)

Я уверен, что мне не хватает чего-то маленького, но я не мог найти пример этого.

Ответ 1

import { mount } from 'enzyme';
import React from 'react';
import ReactDOM from 'react-dom'

it('Should not call action on click inside the component', () => {
  const map = {};
  document.addEventListener = jest.fn((event, cb) => {
    map[event] = cb;
  });

  const props = {
    actions: {
      something: jest.fn(),
    }
  };
  const wrapper = mount(
    <Component {... props} />,
  );

  map.mousedown({
    target: ReactDOM.findDOMNode(wrapper.instance()),
  });

  expect(props.actions.something).not.toHaveBeenCalled();
});

Решение this проблемы с ферментами.

Ответ 2

Использовать sinon для отслеживания handleClickOutside вызывается или нет. Кстати, я только что выпустил наш проект, где мне нужен этот unit тест в компоненте Nav. Действительно, когда вы нажимаете на улицу, все подменю должны быть закрыты.

import sinon from 'sinon';
import Component from '../src/Component';

it('handle clicking outside', () => {
     const handleClickOutside = sinon.spy(Component.prototype, 'handleClickOutside');
     const wrapper = mount(
         <div> 
           <Component {... props} />
           <div><a class="any-element-outside">Anylink</a></div>
         </div>
      ); 

      wrapper.find('.any-element-outside').last().simulate('click'); 
      expect(handleClickOutside.called).toBeTruthy(); 
      handleClickOutside.restore(); 
})