Jest: Как проверить функцию, которая вызывает bind (это)

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

Здесь вам не нужно использовать анонимную функцию.