Mocking 地理位置 API 挂钩反应

Question

我目前有以下自定义挂钩来访问地理位置 API：

const useGeoLocAPI = () => {
  const [coords, setCoords] = useState(null);
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setCoords({
          lat: position.coords.latitude,
          long: position.coords.longitude,
        });
      },
      (error) => {
        console.error(error.message);
      }
    );
  }
  return [coords, setCoords];
};

export default useGeoLocAPI;

由于成功回调使用 setState，我很难尝试模拟这个钩子进行测试。 我还听说 mocking setState是一种反模式，这让我想知道我什至会如何做到这一点。 我可以通过在 setupTests.js 中创建以下模拟来进行简单的冒烟测试

const mockGeolocation = {
  getCurrentPosition: jest.fn(),
  watchPosition: jest.fn(),
};

global.navigator.geolocation = mockGeolocation;

但是因为这个模拟没有设置状态，所以在我的测试中，钩子总是返回null 。

有没有办法正确模拟地理位置 API 所以我可以执行以下操作：

• 断言 state 的形状。
• 断言它是错误处理
• 断言它实际上可以设置 state

如果需要更多信息，我已经在项目的 repo 中创建了一个问题。

Answer 1

钩子在测试中总是返回 null 因为你需要在你的模拟getCurrentPosition方法中返回一个值。

您可以通过实现 function 在模拟方法中返回一个值，以返回您想要的值。

IE，

test('useGeoLocAPI success', () => {
    const mockGeolocation = {
        getCurrentPosition: jest.fn()
            .mockImplementationOnce((success) => Promise.resolve(success({
                coords: {
                    latitude: 51.1,
                    longitude: 45.3
                }
            })))
    };
    global.navigator.geolocation = mockGeolocation;

    const { result } = renderHook(() => useGeoLocAPI());
    const [ coords ] = result.current;

    expect(coords)
        .toEqual({
            lat: 51.1,
            long: 45.3
        });
});

您还可以模拟 geolocation getCurrentPosition方法以返回错误以测试您的错误逻辑。

test('useGeoLocAPI error handling', () => {
    const mockGeolocation = {
        getCurrentPosition: jest.fn()
            .mockImplementationOnce((success, error) => Promise.resolve(error({ message: 'nav error' })))
    };
    global.navigator.geolocation = mockGeolocation;
    const consoleErrorMock = jest.spyOn(global.console, 'error').mockImplementation();

    const { result } = renderHook(() => useGeoLocAPI());
    const [ coords ] = result.current;

    expect(global.console.error)
        .toHaveBeenCalledWith('nav error');
    expect(coords)
        .toBeNull();
    consoleErrorMock.mockRestore();
});

现在您知道如何正确模拟 geolocation getCurrentPosition 方法，您应该能够测试您的钩子的 setState 功能。