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 个道具
• 第一个对象的第一个prop的值是一个字符串
• 第一个对象的第一个prop的key是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,
};