无法在 react-google-maps 中模拟 useLoadScript

Question

Here is the whole code in fiddle

我在使用 React、TypeScript 和 React 测试库的项目中使用 @react-google-maps/api。我正在尝试模拟 @react-google-maps/api 中可用的 useLoadScript 但无法模拟它。这是我用来模拟它的摘录代码：

jest.mock("@react-google-maps/api", () => ({
  useLoadScript: jest.fn().mockImplementation(() => ({
    isLoaded: true,
    loadError: undefined,
    url: ""
  }))
}));

我正在尝试模拟 useLoadScript 以查看 isLoaded 为真的情况。为了以尽可能简单的方式展示这一点，我创建了一个 fiddle 示例测试用例，我试图检查 TextField 是否可见，只有当 isLoaded 为 [=19] 时才会呈现=].

我尝试了多种方法来模拟 useLoadScript，包括上面的尝试，但无法模拟它。

Answer 1

这可能会对其他人有所帮助。

问题的细节是即使我在模拟 useLoadScript 时，测试仍然根本没有模拟它。看到没有错误，什么也没有，我被卡住了。

实际问题是 MyComponent.tsx 文件使用了 @react-google-maps/api 的两个属性，即 useLoadScript 和 GoogleMap。但是正如您在我的问题中看到的那样，我只是想嘲笑 useLoadScript。可能是因为我没有模拟正在使用的 GoogleMap，模拟失败了（TIL）。所以，我把上面的代码改成了下面的，测试通过了：

jest.mock("@react-google-maps/api", () => ({
  useLoadScript: () => ({
    isLoaded: true,
    loadError: null
  }),
  GoogleMap: () => <div></div>
}));

此外，我将此模拟功能保留在 beforeAll 之外。这是 CodeSandbox 上要参考的代码。奇怪的是，该解决方案在 CodeSandbox fiddle 中不起作用，但在我的本地工作正常。