How to “mock” navigator.geolocation in a React Jes

问题:

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.

回答1:

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://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#initializing-test-environment

回答2:

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

回答3:

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"
  ]
}

回答4:

I ended up using enzyme. My test now looks like:

import React from 'react'
import App from './App'
import {shallow} from 'enzyme'

it('renders without crashing', () => {
  const app = shallow(<App />)
  expect(app).toBeDefined()
});

I had to add both the enzyme and react-addons-test-utils packages. No config needed. As of right now I don't actually know why this fixed the issue, as I'm unfamiliar with how enzyme works. I imagine it has something to do with this line from Enzyme's README:

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

回答5:

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 }