При слежке за компонентным методом, вызываемым из componentDidMount, шпион никогда не вызывается

Question

В компоненте React у меня есть

export default class MyComp extends Component {
  ...
  componentDidMount() {
    this.customFunc();
  }
  customFunc = () => {
    // ..
  }
  ...
}

И когда я пытаюсь проверить этот метод с Jest и Enzyme, вот так:

it('Should call customFunc on mount', () => {
  const MyCompInstance = mount(<MyComp {...props} >).instance();
  const spy = jest.spyOn(MyCompInstance, 'customFunc');

  expect(spy).toHaveBeenCalled();
});

не получается с Expected mock function to have been called, but it was not called.

Самое смешное, что если я поставлю console.log() в componentDidMount и в custsomFunc - их вызовут. Что я делаю не так?

PS: я попытался с forceUpdate на экземпляре, прямо перед ожиданием, но я все еще получаю ту же ошибку.

Answer 1

не получается с Expected mock function to have been called, but it was not called.

Самое смешное, что если я поставлю console.log() в componentDidMount и custsomFunc - их вызовут.

Вызов mount визуализирует компонент, а componentDidMount вызывается как часть этого процесса, который, в свою очередь, вызывает customFunc.

Затем spy создается на customFunc, но к этому времени уже слишком поздно, поскольку componentDidMount и customFunc уже выполняются как часть mount, и тест завершается неудачно с сообщением spy о том, что это не называлось.

---

Что я делаю не так?

Вам нужно создать spy на customFunc до того, как будет вызван.

Это очень сложный способ написания кода в настоящее время, так как customFunc реализован как свойство экземпляра .

Поскольку это свойство экземпляра, оно не будет существовать, пока экземпляр не существует, но экземпляр создается во время процесса рендеринга, который в итоге вызывает componentDidMount.

Другими словами, вам нужен экземпляр, чтобы шпионить за customFunc, но customFunc вызывается как часть создания экземпляра.

В этом сценарии единственный способ проверить, вызывается ли customFunc при запуске componentDidMount, это вызвать его снова после создания экземпляра и рендеринга компонента, что является своего рода хак:

import * as React from 'react';
import { mount } from 'enzyme';

class MyComp extends React.Component {
  componentDidMount() {
    this.customFunc();
  }
  customFunc = () => { }  // instance property
  render() { return <div/> }
}

it('Should call customFunc on mount', () => {
  const instance  = mount(<MyComp />).instance();
  const spy = jest.spyOn(instance, 'customFunc');  // spy on customFunc using the instance
  instance.componentDidMount();  // call componentDidMount again...kind of a hack
  expect(spy).toHaveBeenCalled();  // SUCCESS
});

---

Альтернативой является реализация customFunc как метод класса .

Если customFunc является методом класса, он будет существовать в prototype класса, который позволяет вам создать шпиона в customFunc до , когда экземпляр будет создан во время процесса рендеринга в mount

import * as React from 'react';
import { mount } from 'enzyme';

class MyComp extends React.Component {
  componentDidMount() {
    this.customFunc();
  }
  customFunc() { }  // class method
  render() { return <div/> }
}

it('Should call customFunc on mount', () => {
  const spy = jest.spyOn(MyComp.prototype, 'customFunc');  // spy on customFunc using the prototype
  const wrapper = mount(<MyComp />);
  expect(spy).toHaveBeenCalled();  // SUCCESS
});