无法在 react-google-maps 中模拟 useLoadScript [关闭]答案

【问题标题】：Unable to mock useLoadScript in react-google-maps [closed]无法在 react-google-maps 中模拟 useLoadScript [关闭]
【发布时间】：2021-07-30 22:16:54
【问题描述】：

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 为真的情况。为了以尽可能简单的方式展示这一点，我创建了一个带有示例测试用例的小提琴，其中我试图检查 TextField 是否可见，只有当 isLoaded 为 true 时才会呈现。

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

【问题讨论】：

标签： reactjs typescript google-maps jestjs react-testing-library

【解决方案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 中不起作用，但在我的本地运行良好。

【讨论】：