React - Jest - Enzyme: как смоделировать свойства ref

Question

Я пишу тест для компонента с реф.Я хотел бы посмеяться над элементом ref и изменить некоторые свойства, но понятия не имею, как это сделать.Есть предложения?

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

Итак, вот решение, согласно обсуждению в https://github.com/airbnb/enzyme/issues/1937

Возможно обезопасить класс с помощью функции без стрелки, где ключевое слово "this" передается в нужную область.

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