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)}
          />
          ...
    )
  }
}

我正在尝试测试孩子是否装有正确的道具。最初，我将其作为匿名函数使用：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

在构造函数中绑定该方法，以防止该方法在每次组件呈现时重新绑定：

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

然后将绑定方法作为道具传递给孩子：

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

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

开玩笑：如何测试调用bind（this）的函数

1 个答案: