介绍
@Gajus 的回答肯定对我有帮助（所以，感谢 Gajus）。但是，我想我会提供一个答案：
- 使用更新的 React (v15.4.1)
- 使用Jest（随 React 一起提供）
- 允许测试单个props的多个props值
- 是更通用
概括
就像 Gajus 和其他人在此处建议的方法一样，我建议的基本方法也是确定console.errorReact是否使用响应不可接受的 test prop value。具体来说，这种方法涉及对每个测试props值执行以下操作：
- 嘲笑和清除
console.error（以确保之前的调用console.error不会干扰），
- 使用所考虑的测试props值创建组件，以及
- 确认是否
console.error按预期被解雇。
该testPropTypes功能
以下代码可以放置在测试中，也可以作为单独的导入/必需module/文件：
const testPropTypes = (component, propName, arraysOfTestValues, otherProps) => {
console.error = jest.fn();
const _test = (testValues, expectError) => {
for (let propValue of testValues) {
console.error.mockClear();
React.createElement(component, {...otherProps, [propName]: propValue});
expect(console.error).toHaveBeenCalledTimes(expectError ? 1 : 0);
}
};
_test(arraysOfTestValues[0], false);
_test(arraysOfTestValues[1], true);
};
调用函数
任何测试检查propTypes都可以使用三个或四个参数调用testPropTypes：
component，被prop修改的React组件；propName，被测props的字符串名称；arraysOfTestValues，要测试的props的所有所需测试值的数组数组：
- 第一个子数组包含所有可接受的测试props值，而
- 第二个子数组包含所有不可接受的测试props值；和
可选，otherProps一个包含该组件任何其他所需props的props名称/值对的对象。
otherProps需要该对象以确保 React 不会console.error因为无意中丢失了其他必需的 props而对其进行不相关的调用。只需为任何必需的props包含一个可接受的值，例如{requiredPropName1: anyAcceptableValue, requiredPropName2: anyAcceptableValue}.
功能逻辑
该函数执行以下操作：
它设置了一个模拟，console.error React 用它来报告错误类型的props。
对于测试props值的每个子数组，只要它循环遍历每个子数组中的每个测试props值以测试props类型：
- 两个子数组中的第一个应该是可接受的测试props值列表。
- 第二个应该是不可接受的测试props值。
在循环内的每个单独的测试丙值，所述console.error模拟首先清零，使得检测到的任何错误信息可被假定为有来自该测试。
然后使用测试props值以及当前未测试的任何其他必要的必需props创建组件的实例。
最后，检查是否已触发警告，如果您的测试尝试使用不适当或缺失的props创建组件，则应该发生警告。
测试可选与必需的props
请注意，从 React 的角度来看，将null(或undefined)分配给prop 值与不为该 prop 提供任何值本质上是相同的。根据定义，这对于可选props是可以接受的，但对于必需props是不可接受的。因此，通过放置null在可接受或不可接受值的数组中，您可以分别测试该props是可选的还是必需的。
示例代码
MyComponent.js（只是propTypes）：
MyComponent.propTypes = {
myProp1: React.PropTypes.number, // optional number
myProp2: React.PropTypes.oneOfType([ // required number or array of numbers
React.PropTypes.number,
React.PropTypes.arrayOf(React.PropTypes.number)
]).isRequired
MyComponent.test.js：
describe('MyComponent', () => {
it('should accept an optional number for myProp1', () => {
const testValues = [
[0, null], // acceptable values; note: null is acceptable
['', []] // unacceptable values
];
testPropTypes(MyComponent, 'myProp1', testValues, {myProp2: 123});
});
it('should require a number or an array of numbers for myProp2', () => {
const testValues = [
[0, [0]], // acceptable values
['', null] // unacceptable values; note: null is unacceptable
];
testPropTypes(MyComponent, 'myProp2', testValues);
});
});
这种方法的局限性（重要）
目前对于如何使用这种方法存在一些重大限制，如果过度使用，可能会导致一些难以追踪的测试错误。在此其他 SO 问题/答案中解释了这些限制的原因和含义。总之，对于简单的 prop 类型，例如 for myProp1，您可以根据需要测试尽可能多的不可接受的非null测试 prop 值，只要它们都是不同的数据类型即可。对于某些复杂的 prop 类型，例如 for myProp2，您只能测试任何类型的单个不可接受的非nullprop 值。请参阅其他问题/答案以进行更深入的讨论。