web-dev-qa-db-ja.com

Jestを使用して関数をアサートすると、別の関数内から呼び出されます

OnChangeイベントを持つReactにコンポーネントがあります。以下のコードでは、次の場合に正しいメソッドが呼び出されることをアサートする必要があります。

this.props.onChangeImage()

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

以下では、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();
  });
}
javascriptreactjsunit-testingjestjsfrontend
8
blueyodeler

コメントで述べたように、実装にsendEventToParentWindow関数の呼び出しが含まれるモック関数をpropとして渡すことができます。つまり、2つのモック関数を作成する必要があります。

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

それが役に立てば幸い ：）

11
Hardik Modha