web-dev-qa-db-fra.com

Utiliser Jest pour affirmer une fonction est appelé à partir d'une autre fonction

J'ai un composant dans React avec un événement onChange. Dans le code ci-dessous, je dois affirmer que la bonne méthode est appelée lorsque

this.props.onChangeImage()

est invoqué dans le composant Gallery.

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

Ci-dessous, dans la méthode onChangeImage, j'essaie d'affirmer que la méthode sendEventToParentWindow est appelée.

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

J'ai regardé un certain nombre de réponses ici, et bien que celle-ci semble la plus proche, elle ne m'y amène pas tout à fait: plaisanterie - se moquant d'un appel de fonction

EDIT: Voici mon test qui, selon moi, est faux car il attribue la fonction simulée à appeler directement sur Change alors qu'il devrait vraiment appeler la fonction qui à son tour appelle la simulation. J'ai besoin d'une manière ou d'une autre d'appeler la fonction onImageChange, puis de vérifier que mon espion a été appelé.

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();
  });
}
javascriptreactjsunit-testingjestjsfrontend
8
blueyodeler

Comme je l'ai mentionné dans le commentaire, vous pouvez passer une fonction simulée en tant que prop dont l'implémentation contiendra un appel à votre fonction sendEventToParentWindow. c'est-à-dire que vous devrez créer deux fonctions simulées.

  1. sendEventToParentWindow fonction simulée.
  2. onChangeImage fonction mock avec implémentation, où l'implémentation ne contiendra que l'appel à votre fonction sendEventToParentWindow mock.

Donc, le test ressemblera à quelque chose comme ça,

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

J'espère que cela aide :)

11
Hardik Modha