reactjs - enzyme 和 Jest : How to simulate/test material-ui dropzone onChange handler when dropzone component is third party module?

Question

我有一个 material-ui dropzone 组件，它附加了一个 onChange 处理程序。处理程序从主要组件传递 - 作为 Prop 向上两层。

所以主要 - 第二个组件 - dropzone。主要组件包含处理程序方法，而第二个组件只是一个包装器。然后最终 dropzone 组件附加了 onChange。这三个都是功能组件。

Dropzone 模块 --> https://github.com/Yuvaleros/material-ui-dropzone

问题

我不确定我是否要进入此处测试实现细节区域，但我想模拟此 onChange 处理程序运行并将虚拟 csv 文件传递​​给它。当我尝试 simulate("change) 并期望处理程序被调用时，我一直收到 0，预期为 1。

const DropzoneAreaExample = (props) => {
  const classes = useStyles();
  console.log(props);
  return (
    <Fragment>
      <DropzoneArea
        onChange={props.handleDropzoneChange}
        filesLimit={1}
        dropzoneText="Drop your csv file here"
        dropzoneClass={classes.dropzone}
        acceptedFiles={["text/csv", ".csv"]}
        initialFiles={[props.filename]}
        onDelete={props.handleDropzoneDelete}
        showAlerts={true}
        alertSnackbarProps={{
          anchorOrigin: { horizontal: "center", vertical: "bottom" },
          autoHideDuration: 6000,
        }}
        clearOnUnmount={true}
        previewGridClasses={{ container: classes.borderWidth }}
        data-test="component-dropzone"
      />
    </Fragment>
  );
};

在主要组件中，这是将作为 Prop 传递给 dropzone 的 onChange 处理程序

  const handleDropzoneChange = (files) => {
    if (files.length > 0) {
      if (props.originalFileObj) {
        setState({
          files: props.originalFileObj,
          filename: props.originalFileObj[0].name,
        });
      } else {
        setState({
          files: files,
          filename: files[0].name,
        });
      }
    }
  };

测试信息如下:

  it("should fire onChange handler", () => {
    const handleDropzoneChange = jest.fn();
    const dzwrapper = shallow(
      <DropZone handleDropzoneChange={handleDropzoneChange} />
    );
    console.log(dzwrapper.props().children.props);
    dzwrapper.simulate("change", {
      target: {
        files: ["dummyValue.something"],
      },
    });
    console.log(dzwrapper.debug())
  });

这里你在测试中看到的控制台日志是输出:

console.log(dzwrapper.debug()):

<WithStyles(DropzoneArea) onChange={[Function: mockConstructor]} filesLimit={1} dropzoneText="Drop your csv file here" dropzoneClass={[undefined]} acceptedFiles={{...}} initialFiles={{...}} onDelete={[undefined]} showAlerts={true} alertSnackbarProps={{...}} clearOnUnmount={true} previewGridClasses={{...}} data-test="component-dropzone" maxFileSize={3000000} previewText="Preview:" disableRejectionFeedback={false} showPreviews={false} showPreviewsInDropzone={true} showFileNames={false} showFileNamesInPreview={false} useChipsForPreview={false} previewChipProps={{...}} previewGridProps={{...}} getFileLimitExceedMessage={[Function: getFileLimitExceedMessage]} getFileAddedMessage={[Function: getFileAddedMessage]} getFileRemovedMessage={[Function: getFileRemovedMessage]} getDropRejectMessage={[Function: getDropRejectMessage]} />

console.log(dzwrapper.props().children.props):

  {
    onChange: [Function: mockConstructor] {
      _isMockFunction: true,
      getMockImplementation: [Function (anonymous)],
      mock: [Getter/Setter],
      mockClear: [Function (anonymous)],
      mockReset: [Function (anonymous)],
      mockRestore: [Function (anonymous)],
      mockReturnValueOnce: [Function (anonymous)],
      mockResolvedValueOnce: [Function (anonymous)],
      mockRejectedValueOnce: [Function (anonymous)],
      mockReturnValue: [Function (anonymous)],
      mockResolvedValue: [Function (anonymous)],
      mockRejectedValue: [Function (anonymous)],
      mockImplementationOnce: [Function (anonymous)],
      mockImplementation: [Function (anonymous)],
      mockReturnThis: [Function (anonymous)],
      mockName: [Function (anonymous)],
      getMockName: [Function (anonymous)]
    },
    filesLimit: 1,
    dropzoneText: 'Drop your csv file here',
    dropzoneClass: undefined,
    acceptedFiles: [ 'text/csv', '.csv' ],
    initialFiles: [ undefined ],
    onDelete: undefined,
    showAlerts: true,
    alertSnackbarProps: {
      anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
      autoHideDuration: 6000
    },
    clearOnUnmount: true,
    previewGridClasses: { container: 'makeStyles-borderWidth-7' },
    'data-test': 'component-dropzone',
    maxFileSize: 3000000,
    previewText: 'Preview:',
    disableRejectionFeedback: false,
    showPreviews: false,
    showPreviewsInDropzone: true,
    showFileNames: false,
    showFileNamesInPreview: false,
    useChipsForPreview: false,
    previewChipProps: {},
    previewGridProps: {},
    getFileLimitExceedMessage: [Function: getFileLimitExceedMessage],
    getFileAddedMessage: [Function: getFileAddedMessage],
    getFileRemovedMessage: [Function: getFileRemovedMessage],
    getDropRejectMessage: [Function: getDropRejectMessage]
  }

这是组件的样子。当我在添加文件后单击下一步时，文件的内容将得到验证。所以对于测试用例，我想我只是确保调用 onChange 处理程序。然后我将添加另一个测试用例来测试单击下一个按钮时会发生什么。

Answer 1

你可以这样测试:

import DropzoneArea from 'DropzoneArea';

it("should fire onChange handler", () => {
  const handleDropzoneChange = jest.fn();
  const dzwrapper = shallow(
    <DropZone handleDropzoneChange={handleDropzoneChange} />
  );
  // find the DropzoneArea node
  const dropzoneAreaWrapper = dzwrapper.find(DropzoneArea);
  // call its onChange prop
  dropzoneAreaWrapper.prop('onChange')();
  // check handleDropzoneChange has been called
  expect(handleDropzoneChange).toHaveBeenCalled();
});