CODEWITHSUNDEEP
unit-testingreactjsjestjscreate-react-app
timothym
timothym

Reputation: 3275

How to "mock" navigator.geolocation in a React Jest Test

I'm trying to write tests for a react component I've built that utilizes navigator.geolocation.getCurrentPosition() within a method like so (rough example of my component):

class App extends Component {

  constructor() {
    ...
  }

  method() {
    navigator.geolocation.getCurrentPosition((position) => {
       ...code...
    }
  }

  render() {
    return(...)
  }

}

I'm using create-react-app, which includes a test:

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

This test fails, printing out this in the console:

TypeError: Cannot read property 'getCurrentPosition' of undefined

I'm new to React, but have quite a bit of experience with angular 1.x. In angular it is common to mock out (within the tests in a beforeEach) functions, "services", and global object methods like navigator.geolocation.etc. I spent time researching this issue and this bit of code is the closest I could get to a mock:

global.navigator = {
  geolocation: {
    getCurrentPosition: jest.fn()
  }
}

I put this in my test file for App, but it had no effect.

How can I "mock" out this navigator method and get the test to pass?

EDIT: I looked into using a library called geolocation which supposedly wraps navigator.getCurrentPosition for use in a node environment. If I understand correctly, jest runs tests in a node environment and uses JSDOM to mock out things like window. I haven't been able to find much information on JSDOM's support of navigator. The above mentioned library did not work in my react app. Using the specific method getCurrentPosition would only return undefined even though the library itself was imported correctly and available within the context of the App class.

Upvotes: 26

Views: 39414

Answers (10)

grvsmth
grvsmth

Reputation: 460

Some of these answers are helpful, but they don't quite get at the essence of navigator.geolocation.watchPosition(). It does not return a Promise. It returns a Number (a watchId), and periodically executes the provided callback function until .clearWatch() is executed. Here's the test that worked for me to verify the expected functionality:

const mockWatchId = 12345;
const mockResponse = {"mock response": true};
global.navigator.geolocation = {
    "watchPosition": jest.fn().mockImplementation((callback) => {
        callback(mockResponse);
        return mockWatchId;
    });
};

I follow that up with expect() calls to verify that .watchPosition() returns the appropriate watchId and calls the appropriate callback.

Hope this helps!

Upvotes: 0

Thrywyn
Thrywyn

Reputation: 1

I just encountered this myself using Vitest and TypeScript. You can simply replace vitest (vi) with jest. I needed to mock the user accepting the request for their location. This was my solution:

// Mock the geolocation object
const mockedGeolocation = {
    getCurrentPosition: vi.fn((success, _error, _options) => {
        success({
            coords: {
                latitude: 0,
                longitude: 0,
                accuracy: 0,
            },
        });
    }),
    watchPosition: vi.fn(),
};
//Overwrite the properties on naviagtor
Object.defineProperty(global.navigator, "geolocation", {
    writable: true,
    value: mockedGeolocation,
});

Object.defineProperty(global.navigator, "permissions", {
    writable: true,
    value: {
        query: vi
            .fn()
            .mockImplementation(() =>
                Promise.resolve({ state: "granted" }),
            ),
    },
})

Upvotes: 0

Blkc
Blkc

Reputation: 612

It is better to actually use spy in this case to avoid assigning to readonly property if you are using typescript.

import { mock } from 'jest-mock-extended'

jest
  .spyOn(global.navigator.geolocation, 'getCurrentPosition')
  .mockImplementation((success) =>
    Promise.resolve(
      success({
        ...mock<GeolocationPosition>(),
        coords: {
          ...mock<GeolocationCoordinates>(),
          latitude: 51.1,
          longitude: 45.3,
        },
      }),
    ),
  )

Upvotes: 1

Praharsh Singh
Praharsh Singh

Reputation: 17

Added to the above answers, if you want to update navigator.permissions, this will work.The key here is to mark writable as true before mocking

Object.defineProperty(global.navigator, "permissions", {
   writable: true,
   value: {
    query : jest.fn()
    .mockImplementation(() => Promise.resolve({ state: 'granted' }))
   },
});

Upvotes: 0

Jamie
Jamie

Reputation: 4335

A TypeScript version for anyone that was getting Cannot assign to 'geolocation' because it is a read-only property.

In the mockNavigatorGeolocation.ts file (this can live in a test-utils folder or similar)

export const mockNavigatorGeolocation = () => {
  const clearWatchMock = jest.fn();
  const getCurrentPositionMock = jest.fn();
  const watchPositionMock = jest.fn();

  const geolocation = {
    clearWatch: clearWatchMock,
    getCurrentPosition: getCurrentPositionMock,
    watchPosition: watchPositionMock,
  };

  Object.defineProperty(global.navigator, 'geolocation', {
    value: geolocation,
  });

  return { clearWatchMock, getCurrentPositionMock, watchPositionMock };
};

I then import this in my test at the top of the file:

import { mockNavigatorGeolocation } from '../../test-utils';

And then use the function like so:

const { getCurrentPositionMock } = mockNavigatorGeolocation();
getCurrentPositionMock.mockImplementation((success, rejected) =>
  rejected({
    code: '',
    message: '',
    PERMISSION_DENIED: '',
    POSITION_UNAVAILABLE: '',
    TIMEOUT: '',
  })
);

Upvotes: 8

sm7
sm7

Reputation: 669

I followed @madeo's comment above to mock global.navigator.geolocation. It worked!

Additionally I did the following to mock global.navigator.permissions:

  global.navigator.permissions = {
    query: jest
      .fn()
      .mockImplementationOnce(() => Promise.resolve({ state: 'granted' })),
  };

Set state to any of granted, denied, prompt as per requirement.

Upvotes: 4

Joseph Race
Joseph Race

Reputation: 1492

It appears that there is already a global.navigator object and, like you, I wasn't able to reassign it.

I found that mocking the geolocation part and adding it to the existing global.navigator worked for me.

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

global.navigator.geolocation = mockGeolocation;

I added this to a src/setupTests.js file as described here - https://create-react-app.dev/docs/running-tests#initializing-test-environment

Upvotes: 44

JackDev
JackDev

Reputation: 5062

For whatever reason, I did not have the global.navigator object defined, so I had to specify it in my setupTests.js file

const mockGeolocation = {
  getCurrentPosition: jest.fn(),
  watchPosition: jest.fn(),
}
global.navigator = { geolocation: mockGeolocation }

Upvotes: 1

Matteo
Matteo

Reputation: 2634

I know this issue might have been solved, but seems that all the solutions above are all wrong, at least for me.

When you do this mock: getCurrentPosition: jest.fn() it returns undefined, if you want to return something, this is the correct implementation:

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

I am using create-react-app

Upvotes: 33

chinloong
chinloong

Reputation: 3653

Mocking with setupFiles

// __mocks__/setup.js

jest.mock('Geolocation', () => {
  return {
    getCurrentPosition: jest.fn(),
    watchPosition: jest.fn(),
  }
});

and then in your package.json

"jest": {
  "preset": "react-native",
  "setupFiles": [
    "./__mocks__/setup.js"
  ]
}

Upvotes: 5

Related Questions