Question

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

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

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

在我的子控件组件中，我有一个像这样的代码。我期待得到两个道具，一个字符串和一个函数。

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

在父组件内部，我有这个。正如你所看到的，我向我的孩子传递了两个道具，一个字符串和函数。这个prop函数可以从子组件内部调用，它将在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} />
      }
    }
    ...

子组件测试。 我用胶带，酶，sinon。我甚至没有使用那个道具进行测试，我只是浅浅渲染整个组件。

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

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

Stub / mock propTypes用于测试

1 个答案: