时间戳

首页 > 解决方案 > 使用 PropTypes 测试反应组件

reactjs - 使用 PropTypes 测试反应组件

问题描述

如果我有一个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_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意思是我们真的不需要测试这个。我的一部分说我们应该将警告和默认文本作为单独的测试用例进行测试。

对此的任何想法和意见将不胜感激。

标签： reactjstestingreact-proptypes

解决方案

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

推荐阅读