Reactjs 用于测试的存根/模拟类型

我有一个似乎很简单的问题。代码运行良好，一切都很好，但当我测试组件时，我得到了这个警告

失败的道具类型：控件：道具类型 onStatusChange无效；它必须是一个函数，通常来自 控件中的React.PropTypes

如果我从onStatusChange中删除.isRequired，则不会收到任何警告。我如何测试组件，但不测试isRequired？为什么我们不从父级传递字符串的countdownStatus prop得到相同的错误

在我的childcontrols组件中，我有这样一个代码。我希望得到两个道具，一个字符串和一个函数

class Controls extends Component {
  static propTypes = {
    countdownStatus: PropTypes.string.isRequired,
    onStatusChange: PropTypes.func.isRequired
  }
...
}

在父组件中，我有这个。正如你们所看到的，我正在给我的孩子传递两个道具，一个字符串和一个函数。这个道具函数可以从子组件内部调用，它将在parrent组件内部调用handleStatusChange

...
handleStatusChange = (newStatus: string) => {
    this.setState({
      countdownStatus: newStatus
    })
  }

  render (): React.Element<any> {
    const { count, countdownStatus } = this.state
    const renderControlArea = (): any => {
      if (countdownStatus !== 'stopped') {
        return <Controls countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange} />
      } else {
        return <CountdownForm onSetCountdown={this.handleSetCountdown} />
      }
    }
    ...

test('Controls => should render pause button when countdownStatus equals started', (t: Object) => {
  t.plan(1)
  const wrapper: Object = shallow(<Controls countdownStatus={'started'} />)
  const pauseButton = wrapper.render().find('.btn-info').length
  t.equal(pauseButton, 1)
})

子组件测试。 我用胶带，酶，锡农。 我甚至不使用该道具进行测试，我只是简单地渲染整个组件

...
handleStatusChange = (newStatus: string) => {
    this.setState({
      countdownStatus: newStatus
    })
  }

  render (): React.Element<any> {
    const { count, countdownStatus } = this.state
    const renderControlArea = (): any => {
      if (countdownStatus !== 'stopped') {
        return <Controls countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange} />
      } else {
        return <CountdownForm onSetCountdown={this.handleSetCountdown} />
      }
    }
    ...

test('Controls => should render pause button when countdownStatus equals started', (t: Object) => {
  t.plan(1)
  const wrapper: Object = shallow(<Controls countdownStatus={'started'} />)
  const pauseButton = wrapper.render().find('.btn-info').length
  t.equal(pauseButton, 1)
})

---

我找到了解决办法。我只需要在测试时将空的虚拟函数作为道具传递

test('Controls => should render pause button when countdownStatus equals started', (t: Object) => {
  t.plan(1)
  const wrapper: Object = shallow(<Controls countdownStatus={'started'} onStatusChange={() => {}}/>)
  const pauseButton = wrapper.render().find('.btn-info').length
  t.equal(pauseButton, 1)
})