Question

我试图使用jest /酶对我的反应成分进行一些单元测试。

但是我遇到了一个函数的问题我转到了第二个组件。我不明白我是否必须测试或模拟此功能。如果我不得不嘲笑它，我不知道如何为一个功能做这件事。

父组件

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组件进行测试的方法 - 测试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');。

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

1 个答案: