使用PropTypes测试反应组件

Question

如果我有一个定义了PropTypes的反应组件？测试这一点的最佳方法是什么，以确保在不依赖prop-types包警告的情况下提供道具？

例如，如果我有这样的组件：

const Button = ({ text }) => <button>{text ? text : 'default button text'}</button>
Button.propTypes = {
text: PropTypes.string.isRequired
}

如果我没有提供道具，我可能想测试它，以确保default button text被渲染，但在我的文本中，我得到了默认的警告：

console.error node_modulesfbjslibwarning.js:33
Warning: Failed prop type: The prop `text` is marked as required in `Button`, but its value is `undefined`.

我的一部分意见是，PropTypes意味着我们实际上不需要对此进行测试。我的部分意见是，我们应该将警告和默认文本作为单独的测试用例进行测试。

如有任何想法和意见，我们将不胜感激。

Answer 1

删除.isRequired的指定，并使用defaultProps静态属性来分配默认的prop值，而不是执行三元条件。根据需要标记道具，然后尝试为其指定默认值，这是一种反模式。

Answer 2

如果提供默认文本，则不应根据需要标记text属性。此注释适用于组件在没有此道具提供的值的情况下无法工作的情况。正如我们所看到的，情况并非如此。

Answer 3

您可以使用defaultProps静态属性。如果你没有定义道具，这是一个后备方案。

Button.defaultProps = {
text: 'default text',
}