javascript - React testing library 中的模拟导航器对象

我正在使用 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()),
};

我仍然会收到这个错误,上面写着 undefined 的“then”。有人可以帮忙吗?

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);

回答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', () => {  
   ...
})

相似文章

最新文章