CODEWITHSUNDEEP
testingreact-nativegeolocationjestjs
zagoa
zagoa

Reputation: 828

React Native Test with Jest impossible to mock Geolocation

I tried to find a solution on the web and I found this Stackoverflow answer, I followed the instructions but I was blocked:

TypeError: Cannot set property 'geolocation' of undefined

So when I remove the solution my error is: 

ReferenceError: navigator is not defined

My package.json looks like this: 

  "dependencies": {
    "eslint-plugin-react-native": "^3.2.0",
    "prop-types": "^15.6.0",
    "react": "16.0.0",
    "react-native": "0.51.0",
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.1.2",
    "babel-jest": "^22.4.1",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.14.0",
    "eslint-plugin-react": "^7.5.1",
    "jest": "^22.4.2",
    "jest-enzyme": "^6.0.0",
    "react-dom": "^16.2.0",
    "react-scripts": "^1.1.1",
    "react-test-renderer": "16.0.0-beta.5"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
      "\\.(css|less)$": "<rootDir>/assetsTransformer.js"
    },
    "verbose": true
  },
  "plugins": [
    "react",
    "react-native"
  ],
  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "react-native/react-native": true
  }

And my test is just:

test('Map Component', () => {
  // create the snapshot
  const tree = renderer.create(<Map/>).toJSON();
  // test the snapshot
  expect(tree).toMatchSnapshot();
});

The error is on this line, on the navigator: 

navigator.geolocation.getCurrentPosition((position) => {

For the moment I am not testing my component with the navigator. I hope some of you have a solution, please.

Upvotes: 2

Views: 2175

Answers (1)

Gianfranco P
Gianfranco P

Reputation: 10794

Add this in your jest setup.js:

global.navigator = {
  geolocation: {
    clearWatch: jest.fn(),
    getCurrentPosition: jest.fn((success, failure, options) => {
      success({
        coords: {
          longitude: 60,
          latitude: 60,
        },
      });
    }),
    stopObserving: jest.fn(),
    watchPosition: jest.fn(),
  },
};

The setup.js file is the one you specify in your package.json file. i.e:

"jest": {
  "setupFiles": [
    "<rootDir>/__tests__/setup.js"
  ],
  ...

Upvotes: 2

Related Questions