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

Question

如何使用react-testing库模拟从fire事件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 的持续时间。如何模拟视频的持续时间？

- aligatr

Answer 1

您可以修改jsdom对象。

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

- aligatr