如何用 jest 和 react 测试库模拟第三方库自定义事件答案

【问题标题】：How to mock third-party library custom events with jest and react testing library如何用 jest 和 react 测试库模拟第三方库自定义事件
【发布时间】：2020-07-19 12:37:45
【问题描述】：

我正在使用第三方库“react-youtube”，它有一些方法

import Youtube from 'react-youtube';

const PlaySection: FunctionComponent<Props> = ({ ytPlayer, setYtPlayer }) => {
  const [playerState, setPlayerState] = useState<PlayerState>('stopped');

  const onClickFn = (state: PlayerState) => {
     ....
  };

  return (
    <div>
      <YoutubeWrapper>
        <Youtube
          videoId={'aasdfasdf'}
          onReady={(e: { target: YT.Player }) => setYtPlayer(e.target)}
          onStateChange={(e: { data: number }) => setPlayerState(getPlayerState(e.data))}
        />
      </YoutubeWrapper>
      {!!ytPlayer && (
        <Player
          playerState={playerState}
          onPlay={() => onClickFn('playing')}
          onPause={() => onClickFn('paused')}
          onStop={() => onClickFn('stopped')}
        />
      )}
    </div>
  );
};

如何模拟“Youtube”组件并使用“jest”和/或“React 测试库”触发“onReady”和“onStateChange”事件？

我可以想象创建一个模拟的 Youtube 组件，它会有一个按钮，当点击它时会触发“onReady”。然后我可以只使用“fireEvent.click”，但我觉得应该有更好的方法来做到这一点。

【问题讨论】：

标签： reactjs testing jestjs react-testing-library

【解决方案1】：

没有声称这是最佳实践或任何东西，但我已经成功地使用了这种方法。

使用jest.spyOn 为您要模拟的组件提供替代实现：

import * as YoutubeModule from 'react-youtube'


describe('My Cool Video Player', () => {
    let onReady, onStateChange
    beforeEach(() => {
        jest.spyOn(YoutubeModule, 'default')
          .mockImplementation(({ onReady, onStateChange  }) => {
             mockOnReady = onReady
             mockOnStateChange = onStateChange
             return <div>I am a mocked YouTube player</div>
         })
    })

    it('should do something', () => {
       act(() => {
           mockOnReady()
       })
       expect(readiness).toBeTruthy()
     })
})

【讨论】：