web-dev-qa-db-fra.com

Tests unitaires React cliquez sur le composant extérieur

Utiliser le code de cette réponse pour résoudre le clic en dehors d'un composant:

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
    }
}

Je ne peux pas comprendre comment tester à l'unité le chemin malheureux afin que l'alerte ne soit pas exécutée, ce que j'ai jusqu'à présent:

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

J'ai essayé:

  • envoi via wrapper.html()
  • .find Ing un nœud et envoi via (ne se moque pas d'un event.target)
  • .simulate Ing click sur un élément à l'intérieur (ne déclenche pas l'écouteur d'événements)

Je suis sûr qu'il me manque quelque chose de petit mais je n'ai pu trouver d'exemple de cela nulle part.

javascriptunit-testingreactjsjestjsenzyme
20
csilk
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()
})

La solution de this problème d'enzyme sur github.

23
quotesBro