React / JestJS / Enzyme: Comment tester la fonction ref?

Question

J'exécute des tests unitaires en utilisant Jest et Enzyme pour ce composant très simple render():

render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  wrapper = shallow(<Component />)
  expect(wrapper.find(Input)).toHaveLength(1)
})

J'utilise également l'option de couverture de Jest et là je vois que la ligne

ref={input => { this.refInput = input }}

n'est pas couvert par mon test. Que dois-je faire pour obtenir un test unitaire entièrement couvert pour cet exemple de composant?

Answer 1

La référence est attachée à une instance du composant, vous devrez donc utiliser mount pour obtenir une instance du composant.

Pour tester la ref, ajoutez la ligne suivante

expect(wrapper.instance().refInput).toBeTruthy();

Résultat final:

render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find(Input)).toHaveLength(1)
  expect(wrapper.instance().refInput).toBeTruthy();
})