如何测试已在React中从子组件提升到父组件的状态？

Question

我有两个组成部分；一个页面，该页面使用子项中的文件列表，并在任何文件的类型无效时显示一条消息。

父母通过道具将功能传递给孩子，以便他们可以交流。

如果任何文件无效，那么我会向用户显示一条消息，通知他们。

我不确定如何在React with Jest中进行测试，因为我们试图隔离测试所有组件，但是它们具有回调函数依赖性来触发消息。

我应该将无效的文件逻辑和消息显示移给孩子吗？这样，我会增加组件的复杂性，但使测试更容易？

父组件

    const Parent = () => {
     const handleOnDocumentDrop = useCallback(
        (fileList): void => {
          if (invalid.length) {
            // I want to be able to assert that this is shown in Jest
            toast({
              position: 'top-right',
              title: 'title',
              description: 'description',
              status: 'error',
              duration:'5000',
              isClosable: true,
            });
          }
        },
        []
      );
      return (
    <Child onDocumentDrop={handleOnDocumentDrop} />
      );
    };

子组件

const Child = ({ onDocumentDrop }) => {
  const onDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.dataTransfer.files) {
      onDocumentDrop(e.dataTransfer.files);
    }
  };
  return (
    <Flex
      onDrop={onDrop}
    >
    </Flex>
  );
};

Answer 1

const trigger = jest.fn();
const wrapper = render(<Child onDocumentDrop={trigger} />);

const images = //files to test

wrapper.find(addressTheDropzoneHere).simulate('drop', { dataTransfer: { files: images } });
expect(trigger).toBeCalledTimes(numberOfIncorrectFiles)