如何在 ref 上模拟回调以进行反应测试？答案

【问题标题】：How do I mock callbacks on a ref for testing in react?如何在 ref 上模拟回调以进行反应测试？
【发布时间】：2018-02-15 07:34:43
【问题描述】：

我在反应应用程序中使用视频反应。我必须测试一个从视频反应组件调用 ref 方法的组件。我希望使用酶，这样我就可以挂载组件并检查我是否调用了 ComponentDidMount 中的 ref 方法。

基本上，我如何测试 refs.player.seek 是否像下面那样被调用？

componentDidMount() {
    this.refs.player.seek(this.props.currentTime);
    this.refs.player.subscribeToStateChange(this.handlePlayerStateChange);
}

【问题讨论】：

你应该避免使用this.refs，因为它在最新版本的 React 中已被弃用。而是使用回调模式。更多信息here 和 here。
@Chris 感谢您指出这一点，我已经修复了我的代码并将更新我的示例！

标签： reactjs jestjs enzyme video-reactjs

【解决方案1】：

由于 video-react 需要 refs 调用 play、pause 和 seek 据我所知，我最终使用了这种模式，这样我就可以模拟我自己的 ref 回调命中渲染方法。

https://medium.com/@planttheidea/never-render-in-react-testing-again-fc4bcfc2f71d

示例组件代码：

export const createComponentWillReceiveProps = instance => ({seekTime, isPlaying, onSeekComplete}) => {
  const {paused} = instance.playerRef.getState().player;

  if (seekTime) {
    instance.playerRef.seek(seekTime);
    onSeekComplete();
  }
  if (isPlaying && paused) {
    instance.playerRef.play();
  }
  if (!isPlaying && !paused) {
    instance.playerRef.pause();
  }
};

...

componentWillReceiveProps = createComponentWillReceiveProps(this)

...

<VideoReactPlayer ref={el => this.playerRef = el} preload='auto' src={source}>

...

测试看起来像这样：

  it('calls playerRef.play when isPlaying prop is true & paused is true', () => {
    const instance = {playerRef: {play: jest.fn(), getState: () => ({player: {paused: true}})}};
    const componentWillReceiveProps = createComponentWillReceiveProps(instance);
    componentWillReceiveProps({isPlaying: true});
    expect(instance.playerRef.play).toBeCalled();
  });

【讨论】：