Как проверить метод реагирующего компонента, вызванный другим методом

Question

У меня есть класс, который при инициализации вызывает другой метод, который вызывает другой метод с именем pan . Я пытаюсь проверить, был ли вызван метод панорамирования. Класс более сложный, чем это, но все, что я пытаюсь проверить, это pan .

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.pan = this.pan.bind(this);
  }

  componentDidMount() {
    initExternals();
  }

  initExternals() {
    .. bla bla
   this.pan();
  }

  pan() {
   console.log('Function was called');
  }

}

Вот мой тестовый класс

test('component should call initMap', () => {
  const spy = jest.spyOn(WhereWeAreMap.prototype, 'pan');
  const component = mount(<WhereWeAreMap />);
  expect(spy).toHaveBeenCalled();
});

I have also tried.
test('component should call initMap', () => {
  const component = mount(<WhereWeAreMap />);
  const spy = jest.spyOn(component.instance(), 'pan');
  wrapper.instance().forceUpdate();
  expect(spy).toHaveBeenCalled();
});

Что не так с моим тестом, так как он не может протестировать метод компонента pan вызывается Ожидаем (шпион) .toHaveBeenCalled () . Журнал показывает, что он вызывается, но мой тест показывает по-другому.

Ожидается, что фиктивная функция была вызвана, но она не была вызвана.

Answer 1

Первый метод тестирования - это то, что определенно работает для меня, он быстро добавлен в тест, у меня работает банкомат, и это нормально:

  it('adds the correct scroll blocking class to document.body', () => {
    const spy = jest.spyOn(BlockUI.prototype, 'foo');
    const instance = mount(<BlockUI />).instance();
    // some suggest you need to do this but works without it.
    // instance.forceUpdate();

    const body = instance.document.body;
    expect(body.className).toMatchSnapshot();
    expect(spy).toHaveBeenCalled();
  });

BlockUI.prototype.foo добавляет ссылку на document.body к экземпляру и добавляет к нему класс, который необходимо удалить при размонтировании.

Вышеуказанная настройка подходит для:

"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.7.1",
"enzyme-to-json": "3.3.4",
"jest": "23.6.0",

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

Существуют исключения с асинхронными вещами, которые могут вызвать проблемы - я предлагаю вместо использования шпиона проверять результат вызова метода, который вы хотите гарантировать, что бы это ни было. Методы жизненного цикла гарантированно будут вызваны, если не использовать неглубокий рендер в ферменте

Вы изменяете метод pan в экземпляре в конструкторе, сохраняя его локальную связанную копию из прототипа - но он все равно должен вызывать прототип, и шпион должен его поймать. Я ожидаю, что вы на старых версиях чего-то.

Answer 2

   class MyComponent extends React.Component {

      constructor(props) {
        super(props);
        this.pan = this.pan.bind(this);

      }

      componentDidMount() {
        this.initExternals();
      }

      initExternals() {
       this.pan();
      }

      pan() {
       console.log('Function was called');
      }
    }

Применить область действия MyComponent в методе componentDidMount

initExternals должен быть таким .initExternals

Мое намерение с объектом окна было сказать, что другие области видимости могут быть связаны с функцией

Например, если функция была вызвана с областью окна, т.е. window.initExternals, тогда ключевое слово this будет ссылаться на окно

Тогда да, это будет window.pan