相关疑难解决方法(0)

我正在尝试为我构建的反应组件编写测试,这些组件navigator.geolocation.getCurrentPosition()在类似的方法中使用(我的组件的粗略示例):

class App extends Component {

  constructor() {
    ...
  }

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

  render() {
    return(...)
  }

}

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

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

此测试失败,在控制台中打印出来:

TypeError: Cannot read property 'getCurrentPosition' of undefined

我是React的新手,但对于角度1.x有相当多的经验.在angular中,通常模拟(在beforeEach中的测试中)函数,"服务"和全局对象方法,如navigator.geolocation.etc.我花了很多时间研究这个问题,这段代码是我最接近模拟的代码:

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

我把它放在App的测试文件中,但没有效果.

我如何"模拟"这个导航器方法并让测试通过？

编辑:我研究了一个名为geolocation的库,它应该包含navigator.getCurrentPosition在节点环境中使用.如果我理解正确,jest在节点环境中运行测试并使用JSDOM来模拟像window.我无法找到有关JSDOM支持的更多信息navigator.上面提到的库在我的反应应用程序中不起作用.使用特定方法getCurrentPosition只会返回undefined,即使库本身已正确导入并在App类的上下文中可用.

我目前正在编写一个小型库来帮助连接到媒体设备，如果我可以对该库进行单元测试，那就太好了，我的打字稿库中有一个如下所示的函数，

static connectAudioDevice(device?: InputDeviceInfo) : Promise<MediaStream> {
    return new Promise<MediaStream>((resolve, reject) => {
        navigator.mediaDevices.getUserMedia({audio: true})
            .then(stream => {
                resolve(stream);
            })
            .catch(error => {
                resolve(error);
            })
    })
}

我想用它jest.spyOn来模拟getUserMedia这可能吗？就像是，

import devices from '@/assets/lib/devices.ts';

test('Resolves with valid audio mediaStream', () => {

    const audioStream = {};
    let promise = devices.connectAudioDevice();

    jest.spyOn(window.navigator.mediaDevices, 'getUserMedia', promise);

})

但我收到错误：

无法监视原始值；未定义给定

有人能给我一些帮助吗？