Javascript 有没有办法使用jest对从子React组件调用的可访问回调函数进行单元测试

我正在对React 16功能组件进行单元测试，该组件定义回调，并将其作为属性传递给下一个组件，以便在触发单击事件时调用

import React from 'react'

function OuterComponent() {

  const handleClick = useCallback(() => {
    openDialog() // <--- This code is inaccessible from my "OuterComponent.test.js" unit test 
  }

  return <MyDialog clickHandler={handleClick} />
}
export default OuterComponent

我正在寻求100%的测试覆盖率，并希望使用jest模拟所有其他组件/函数，这些组件/函数不是OuterComponent组件的一部分

我遇到的问题是，我似乎无法模拟MyDialog组件以使其触发handleClick函数

我还尝试使用这个代码段模拟组件，但它似乎仍然试图从MyDialog加载所有导入

---

这里的希望是，我可以为MyDialog呈现一个空div，只需调用handleClick函数来测试它。有人知道我可能做错了什么，或者对如何测试它有其他想法吗？

我认为你不能在闭包中模拟var。您所能做的最好的事情就是遵循以下原则：

import { fireEvent, render } from 'react-testing-library';

jest.mock(
  'components/MyDialog',
  () => ({ clickHandler }) => (
    <button
      onClick={clickHandler}
      test-id="button"
    >
      Click me
    </button>
  ),
);

it('should call clickHandler', () => {
  const onClick = jest.fn(() => null);
  const { queryByTestId } = render(<MyDialog clickHandler={onClick} />);
  fireEvent.click(queryByTestId('button'));
  expect(onClick.toHaveBeenCalledTimes(1));
});

---

实际上，您可以测试MyDialog呈现可以执行回调的内容的能力。

出于好奇：为什么不测试调用了handleClick，而不是openDialog？如果你想测试的是openDialog做了它应该做的事情，比如打开一个对话框，为什么不简单地测试模拟对话框是否存在，而不是检查函数是否被调用？也就是说，不要过于关注实现细节，只需测试用户会看到什么。@NicolasSEPTIER这对我也适用，但我还没有找到一种方法来模拟对话框并调用其clickHandler属性函数。在我的例子中，您模拟的onClick函数被定义为父组件OuterComponent中的回调函数handleClick，这就是我要测试的代码。那么，您就不能测试在函数组件中定义的函数了。

import { fireEvent, render } from 'react-testing-library';

jest.mock(
  'components/MyDialog',
  () => ({ clickHandler }) => (
    <button
      onClick={clickHandler}
      test-id="button"
    >
      Click me
    </button>
  ),
);

it('should call clickHandler', () => {
  const onClick = jest.fn(() => null);
  const { queryByTestId } = render(<MyDialog clickHandler={onClick} />);
  fireEvent.click(queryByTestId('button'));
  expect(onClick.toHaveBeenCalledTimes(1));
});