reactjs - 如何在 react 测试库中模拟视频持续时间？

Question

如何使用 react 测试库从触发事件 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,
});