javascript - 传递给组件的 ReactJS/Jest : How to test/mock a function,

Question

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

但是我在传递给第二个组件的函数时遇到了问题。我不明白我是否必须测试或模拟此功能。如果我必须模拟它，我不知道如何为一个函数做到这一点。

父组件

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

这就是我对子组件进行测试的方式 - 测试 handleChange:

单元测试( child )

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');。