React - Jest - Enzyme: Comment se moquer des propriétés ref

Question

J'écris un test pour un composant avec ref. Je voudrais me moquer de l'élément ref et modifier certaines propriétés, mais je ne sais pas comment. Aucune suggestion?

// MyComp.jsx
class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.getRef = this.getRef.bind(this);
  }
  componentDidMount() {
    this.setState({elmHeight: this.Elm.offsetHeight});
  }
  getRef(Elm) {
    this.Elm = Elm;
  }
  render() {
    return <div>
      <span ref={getRef}>
        Stuff inside 
      </span>
    </div>
  }
}

// MyComp.test.jsx
const comp = mount(<MyComp />);
// Since it is not in browser, offsetHeight is 0
// mock ref offsetHeight to be 100 here... How to?
expect(comp.state('elmHeight')).toEqual(100);

Answer 1

Voici donc la solution, selon la discussion dans https://github.com/airbnb/enzyme/issues/1937

Il est possible de patcher la classe avec une fonction non fléchée, où "ce" mot-clé est passé à la bonne portée.

function mockGetRef(ref:any) {
  this.contentRef = {offsetHeight: 100}
}
jest.spyOn(MyComp.prototype, 'getRef').mockImplementationOnce(mockGetRef);
const comp = mount(<MyComp />);
expect(comp.state('contentHeight')).toEqual(100);