我目前有以下自定義掛鉤來訪問地理位置 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 ，我很難嘗試模擬這個鉤子進行測驗。我還聽說嘲笑setState是一種反模式，這讓我想知道我什至會如何做到這一點。我可以通過在 setupTests.js 中創建以下模擬來進行簡單的冒煙測驗
const mockGeolocation = {
getCurrentPosition: jest.fn(),
watchPosition: jest.fn(),
};
global.navigator.geolocation = mockGeolocation;
但是因為這個模擬沒有設定狀態，所以鉤子總是null在我的測驗中回傳。
有沒有辦法正確模擬地理定位 API，以便我可以執行以下操作：
- 斷言狀態的形狀。
- 斷言它是錯誤處理
- 斷言它實際上可以設定狀態
如果需要更多資訊，我已經在專案的 repo 中創建了一個問題。
uj5u.com熱心網友回復：
getCurrentPosition鉤子在測驗中總是回傳 null 因為你需要在你的模擬方法中回傳一個值。
您可以通過實作一個函式來回傳您想要的值，從而在模擬方法中回傳一個值。
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
});
});
您還可以模擬 geolocationgetCurrentPosition方法以回傳錯誤以測驗您的錯誤邏輯。
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 功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507613.html
上一篇：賽普拉斯正在尋找錯誤物件中的屬性