reactjs - 开 Jest : How to test function that calls bind(this)

Question

我有一个如下所示的父组件:

export class Header extends Component {
  constructor(props) {
    super(props)
    this.state = { activeTab: TAB_NAMES.NEEDS_REVIEW }
  }

  filterByNeedsReview() {
    const { filterByNeedsReviewFn } = this.props
    this.setState({ activeTab: TAB_NAMES.NEEDS_REVIEW })
    filterByNeedsReviewFn()
  }


  render() {
    return (
        ...
          <FilterTab
            ...
            onClick={this.filterByNeedsReview.bind(this)}
          />
          ...
    )
  }
}

我正在尝试测试 child 是否装载了正确的 Prop 。最初我将其作为匿名函数: onClick={ () => this.filterByNeedsReview() } 但我无法测试它，所以我尝试继续使用 bind(this) 相反。

但是，我在模拟 bind 函数时遇到问题:

  it('renders a filter tab with the right props for needs review', () => {
    const bounded = jest.fn()
    const boundedFilterByNeedsReview = jest.fn(() => {
      return { bind: bounded }
    })
    Header.prototype.filterByNeedsReview = boundedFilterByNeedsReview
    expect(
      shallowRender()
        .find(FilterTab)
        .findWhere(node =>
          _.isMatch(node.props(), {
            ... // other props
            onClick: bounded, //<-------------- FAILS WHEN I ADD THIS LINE
          })
        )
    ).toHaveLength(1)
  })

Answer 1

在构造函数中绑定(bind)该方法，以防止每次组件渲染时重新绑定(bind)该方法:

constructor(props) {
    super(props)
    this.state = { activeTab: TAB_NAMES.NEEDS_REVIEW }
    this.filterByNeedsReview = this.filterByNeedsReview.bind(this)
}

然后将绑定(bind)方法作为 prop 传递给子级:

<FilterTab
    ...
    onClick={this.filterByNeedsReview}
/>

您不需要在此处使用匿名函数。