如何在反应测试库中模拟视频持续时间？

Question

如何使用 react-testing 库模拟火灾事件 loadedMetadata 的视频持续时间？

在我的 React 代码中，我正在使用 loadedMetaData 事件侦听器检索视频持续时间：

const MyVideo = () => {
   const [videoDuration, setVideoDuration] = useState(0);

   const handleMetadataLoaded = e => {
      setVideoDuration(e.currentTarget.duration);
   }

   return (
      <video
         data-testid="vidMyVideo"
         src="*some_source*"
         poster="*poster_image*"
         onLoadedMetadata={handleMetadataLoaded}
      />

   );

}

我尝试对上面的代码进行单元测试：

import '@testing-library/jest-dom/extend-expect';
import { act, fireEvent, render } from '@testing-library/react';

...

const MyVideo = require('../').default;
const { findByTestId } = render(
   <MyVideo />
);
const inlineVideo = await findByTestId('vidMyVideo');
// the event is fired but I got NaN for the duration. how to mock it?
await act(async () => fireEvent.loadedMetadata(inlineVideo));

loadedMetadata 被解雇了，但在此期间我得到了 NaN。 如何模拟视频时长？

Answer 1

你可以修改jsdom对象

Object.defineProperty(inlineVideo, 'duration', {
   writable: true,
   value: 10,
});