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 编写这种 prop 验证，还是坚持使用 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,
};

React PropTypes 与单元测试

React PropTypes vs Unit Testing

testing

unit-testing

reactjs

react-proptypes