React PropTypes与单元测试

Question

React的PropTypes允许创建如下所示的自定义验证器：

 static propTypes = {  
    myPassedArray: PropTypes.array.isRequired,
    customProp: function(props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
          return new Error(
            'Invalid prop `' + propName + '` supplied to' +
            ' `' + componentName + '`. Validation failed.'
          );
        }
      },
    }

例如，对于值：

[{propOne: 'string', propTwo: 2}, {propOne: 1, propTwo: 'value'}];

可以验证是否：

• 此值为数组
• 此值由对象
组成
• 对象不是数组的实例
• 此值的长度为2
• 此值的每个对象都有2个道具
• 第一个对象的第一个道具的值是一个字符串
• 第一个对象的第一个道具的关键是propOne
• a.s.o为每个值

我是否应该使用PropTypes编写这种道具验证，或者最好坚持使用PropTypes进行浅层验证并将大部分工作专门用于单元测试？

Answer 1

鉴于

cont myData = [{propOne: 'string', propTwo: 2}, {propOne: 1, propTwo: 'value'}];

这应该可以满足您的大部分要求

MyComponent.propTypes = {
  myData: PropTypes.arrayOf(
    PropTypes.shape({
      propOne: PropTypes.string.isRequired,
      propTwo: PropTypes.number.isRequired,
    }),
  ).isRequired,
};