在React测试库中模拟导航器对象

Question

我使用navigator来检测浏览器中的相机设置。下面是我的React组件的节选:

navigator.mediaDevices
.getUserMedia({ video: true })
.then(() => {
setError(false);
})
.catch((e) => {
if (e) {
setError(true);
}
});

我在我的setupTests.js文件中模拟了navigator对象

global.navigator.mediaDevices = {
getUserMedia: jest.fn().mockImplementation(() => Promise.resolve()),
};

我仍然会得到这个错误，说'then'的undefined。有人能帮忙吗?

TypeError: Cannot read property 'then' of undefined
51 |   const [error, setError] = useState(false);
52 |
> 53 |   navigator.mediaDevices
|   ^
54 |     .getUserMedia({ video: true })
55 |     .then(() => {
56 |       setError(false);

Answer 1

我自己解决了这个问题。我必须创建一个模拟文件并将其导入到我的测试用例中。

用下面的代码__mocks__/navigator.js

创建一个模拟文件

const mockMediaDevices = {
getUserMedia: jest.fn().mockResolvedValueOnce('fake data'),
};
Object.defineProperty(navigator, 'mediaDevices', {
writable: true,
value: mockMediaDevices,
});

在我的测试文件中，我导入了模拟导航器文件。

import __mocks__/navigator';
navigator.mediaDevices.getUserMedia = () => {
return new Promise((resolve) => {
resolve();
});
};
it('should test something', () => {  
...
})