ReactJS / Jest：如何测试/模拟传递给组件的函数

Question

我正在尝试对我的React组件使用Jest / Enzyme进行一些单元测试。

但是我在传递给第二个组件的函数时遇到了问题。我不知道是否必须测试或模拟此功能。如果我必须模拟它，我不知道如何针对某个函数执行该操作。

父组件

export default class Parent extends Component {
  togglePosition (term, event) {
    this.setState({
      top: term.length >= 3
    })
  }

  render () {
    return (
      <div>
        <Child togglePosition={this.togglePosition} />
      </div>
    )
  }
}

子组件

export default class Child extends Component {
  handleChange (event) {
    const term = event.target.value
    this.props.togglePosition(term) // <-- Test/mock it?
    this.setState({
      loading: 'loading',
      term
    })
  }

  render () {
    return (
      <div>
        <Input id="target-input" onChange={this.handleChange} />
      </div>
    )
  }
}

这是我对Child组件进行测试的方法-testing handleChange：

单元测试（儿童）

it('handleChange() should set state.term', () => {
  const event = { target: { value: 'test' } }
  const wrapper = shallow(<Child />)

  wrapper.find('#target-input').simulate('change', event)
  const state = wrapper.instance().state
  expect(state).toEqual({ loading: 'loading', term: 'test' })
})

出现此错误： TypeError: this.props.togglePosition is not a function

Answer 1

未经实际测试，我相信这就是您所需要的：

it('handleChange() should set state.term', () => {
  const togglePosition = jest.fn();
  const event = { target: { value: 'test' } };
  const wrapper = shallow(<Child togglePosition={togglePosition} />);

  wrapper.find('#target-input').simulate('change', event);
  const state = wrapper.instance().state;
  expect(state).toEqual({ loading: 'loading', term: 'test' });
  expect(togglePosition).toHaveBeenCalledWith('test');
})

模拟传递的函数：const togglePosition = jest.fn();，并测试条件/响应：expect(togglePosition).toHaveBeenCalledWith('test');。