Question

是否有定义了PropTypes的React组件？最好的测试方法是什么，以确保在不依赖prop-types软件包警告的情况下提供道具？

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

const Button = ({ text }) => <button>{text ? text : 'default button text'}</button>

Button.propTypes = {
  text: PropTypes.string.isRequired
}

如果我不提供任何道具，我可能希望对其进行测试以确保呈现default button text，但是在我的文字中，我得到了默认警告：

console.error node_modules\fbjs\lib\warning.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静态属性来分配默认属性值，而不是执行三元条件。这是一种反模式，可以根据需要标记道具，然后尝试为其指定默认值。

Answer 2

如果提供默认文本，则不应根据需要标记text属性。此注释适用于您的组件无法缺少此道具提供的价值的情况。我们不能看到这种情况。

Answer 3

您可以使用defaultProps静态属性。如果您不定义道具，则会设置后备选项。

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

使用PropTypes测试React组件

3 个答案: