如何“模拟"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 有相当多的经验.在 angular 中，模拟(在 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()
  }
}

我把它放在我的应用程序测试文件中，但没有效果.

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?

我研究了使用一个名为 geolocation 的库，据说它包装了 navigator.getCurrentPosition 用于节点环境.如果我理解正确的话，jest 在节点环境中运行测试并使用 JSDOM 来模拟 window 之类的东西.我没能找到很多关于 JSDOM 对 navigator 的支持的信息.上面提到的库在我的反应应用程序中不起作用.即使库本身已正确导入并且在 App 类的上下文中可用，使用特定方法 getCurrentPosition 也只会返回 undefined.

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 文件中，如下所述 - https://create-react-app.dev/docs/running-tests#initializing-test-environment

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

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