如何“模拟" React Jest测试中的navigator.geolocation [英] How to "mock" navigator.geolocation in a React Jest Test

问题描述

我正在尝试为这样构建的React组件编写测试，该组件在这样的方法中利用了navigator.geolocation.getCurrentPosition()(我的组件的粗略示例):

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(...)
  }

}

我正在使用 create-react-app ，其中包括一个测试:

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

我是React的新手，但是对angular 1.x有很多经验.在角度上，通常会模拟出(在beforeEach中的测试中)函数，服务"以及诸如navigator.geolocation.etc之类的全局对象方法.我花了一些时间研究这个问题，而这段代码是我可以模拟的最接近的代码:

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()
  }
}

我将其放入App的测试文件中，但没有效果.

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?

我研究使用名为地理位置的库，该库应该包装navigator.getCurrentPosition以供使用在节点环境中.如果我理解正确，那么jest会在节点环境中运行测试，并使用JSDOM模拟出window之类的东西.关于JSDOM对navigator的支持，我找不到很多信息.上面提到的库在我的应用程序中不起作用.即使库本身已正确导入并且可以在App类的上下文中使用，使用特定方法getCurrentPosition只会返回未定义.

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.

推荐答案

似乎已经有一个global.navigator对象，并且像您一样，我无法重新分配它.

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

我发现模拟地理位置部分并将其添加到现有的global.navigator中对我来说很有效.

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;

我已按此处所述将其添加到src/setupTests.js文件中-

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

这篇关于如何“模拟" React Jest测试中的navigator.geolocation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！