Как утверждать, что функция вызывается из другой функции?

У меня есть компонент в React с событием onChange. В приведенном ниже коде мне нужно утверждать, что правильный метод вызывается, когда

this.props.onChangeImage()

вызывается в компоненте "Галерея".

export class Form extends React.PureComponent {

  componentDidMount = () => {
    this.props.getUser();
    this.props.getImages();
    this.props.getBoards();
  }

  render() {
    if (this.props.pin === null) {
      let boards = [];
      boards = this.props.boards;
      boards = boards.data.map(
        (item) => <MenuItem key={item.id.toString()} value={item.name} primaryText={item.name} />
      );
      return (
        <div>
          <Helmet
            title="Form"
            meta={[
              { name: 'description', content: 'Description of Form' },
            ]}
          />
          <Gallery images={this.props.images} onChange={this.props.onChangeImage} />
        </div>
      );
    }
    return (<div className="spinner-container"><CircularProgress /></div>);
  }
}

Ниже в методе onChangeImage я пытаюсь утверждать, что вызывается метод sendEventToParentWindow.

function mapDispatchToProps(dispatch) {
  return {

    onChangeImage: (event) => {
      dispatch(createPinImage(event.target.value));
      sendEventToParentWindow({
        action: 'change-image',
        description: 'Change image',
      });
    },
  };
}

function sendEventToParentWindow(message) {
  window.postMessage(message, window.location.href);
}

export default connect(mapStateToProps, mapDispatchToProps)(Form);

Я просмотрел здесь несколько ответов, и хотя этот мне показался наиболее близким, он не совсем меня туда привел: Jest - имитация вызова функции

РЕДАКТИРОВАТЬ: Вот мой тест, который я считаю неправильным, потому что он назначает фиктивную функцию для непосредственного вызова onChange, когда она действительно должна вызывать функцию, которая, в свою очередь, вызывает макет. Мне нужно как-то вызвать функцию onImageChange, а затем убедиться, что мой шпион был вызван.

import Gallery from '../index';
import * as formIndex from '../../../containers/Form';

describe('<Gallery />', () => {
  it('Expect sendMessageToParentWindow to be called on image change', () => {
    const sendEventToParentWindowMock = jest.spyOn(formIndex, 'sendEventToParentWindow');
    const gallery = shallow(<Gallery images={imagesMockData} onChange={sendEventToParentWindowMock} />);
    gallery.find('input#image-1').simulate('change');

    expect(sendEventToParentWindowMock).toBeCalled();
  });
}

reactjs javascript frontend unit-testing jestjs
person blueyodeler    schedule 14.07.2017    source источник
comment
Какую библиотеку тестирования вы используете? Фермент? Если да, то визуализируете ли вы компонент поверхностно?   -  person Hardik Modha    schedule 14.07.2017
comment
@HardikModha, у меня есть Enzyme, и я пробовал выполнять неглубокий рендеринг и монтировать компонент. Мне не повезло, но я все еще учусь и возюсь. Спасибо за совет!   -  person blueyodeler    schedule 14.07.2017
comment
Вы можете передать фиктивную функцию (реализация которой содержит фиктивный вызов метода) в качестве опоры, когда вы неглубоко отрисовываете компонент.   -  person Hardik Modha    schedule 14.07.2017
comment
@HardikModha Похоже, это сработало. Я был очень близок к проблеме, но не совсем до нее добрался. Спасибо! Я создаю тесты с некоторыми другими компонентами и вернусь, если у меня возникнут другие вопросы. Если все будет хорошо, я отправлю свой ответ. Спасибо еще раз!   -  person blueyodeler    schedule 14.07.2017
comment
Рад, что помог тебе. :)   -  person Hardik Modha    schedule 14.07.2017
comment
Что ж, это определенно приблизило меня к пониманию проблемы. Я добавил правку выше, которая включает тест. Я считаю, что тест неправильный, но я ближе, чем был.   -  person blueyodeler    schedule 14.07.2017

Ответы (1)


arrow_upward
15
arrow_downward

Как я уже упоминал в комментарии, вы можете передать имитацию функции как опору, реализация которой будет содержать вызов вашей функции sendEventToParentWindow. т.е. вам нужно будет создать две имитируемые функции.

  1. sendEventToParentWindow фиктивная функция.
  2. onChangeImage фиктивная функция с реализацией, где реализация будет содержать только вызов вашей sendEventToParentWindow фиктивной функции.

Итак, тест будет выглядеть примерно так:

describe('<Gallery />', () => {
  it('Expect sendMessageToParentWindow to be called on image change', () => {
    const sendEventToParentWindowMock = jest.fn();
    const onChangeImageMock = jest.fn(() => {
         sendEventToParentWindowMock();
    });

    const gallery = shallow(<Gallery images={imagesMockData} onChange={onChangeImageMock} />); // Passing the mocked onChangeImage as prop
    gallery.find('input#image-1').simulate('change');

    expect(sendEventToParentWindowMock).toBeCalled();
  });
}

Надеюсь, это поможет :)

person Hardik Modha    schedule 15.07.2017
comment
Это то понимание, которого мне не хватало! Я попробую это сделать в понедельник, когда вернусь в офис, но еще раз спасибо за ваше терпение и пример кода! Это действительно помогает увидеть убедительный пример. - person blueyodeler; 15.07.2017
comment
Это был недостающий бит! Спасибо еще раз. Я принял ответ. - person blueyodeler; 17.07.2017