Reactコンポーネントをテストする方法propType検証

Question

PropTypes.shapeのReactコンポーネントのpropType検証をユニット単位でテストするにはどうすればよいですか？

マイ部品propTypesの検証：

MyComponent.propTypes = { 
    propA: PropTypes.string.isRequired, 
    propB: PropTypes.shape({ 
    inner1: PropTypes.bool.isRequired, 
    inner2: PropTypes.func, 
    }).isRequired, 
} 

私のユニットテスト：

：私は、次のあなたが行うことができ、これをユニット・テストのポイントが表示されていないけれども

describe('MyComponent propTypes validation',() => { 
    it('validates propA',() => { 
    expect(MyComponent.propTypes.propA).toBe(PropTypes.string.isRequired); 
    }) 

    // THIS FAILS. Expected: [Function bound checkType], actual: [Function bound checkType] 
    it('validates propB',() => { 
    expect(MyComponent.propTypes.propB) 
     .toEqual(
     PropTypes.shape({ 
      inner1: PropTypes.bool.isRequired, 
      inner2: PropTypes.func, 
     }).isRequired 
    ); 
    }) 
}) 

Answer 1

異なるオブジェクトとして図形をエクスポートする

// some-descriptive-name-shape.js 
export default { 
    inner1: PropTypes.bool.isRequired, 
    inner2: PropTypes.func, 
} 

と単体テストしてください。

以上の一般的なアプローチは、それがあなたのスパイ呼び出しを見に無効なプロパティとレンダリングconsole.errorをスパイするためにsinonを使用してコンポーネントを行うことであろう

let consoleError; 

beforeEach(() => { 
    consoleError = spyOn(console, 'error'); 
}); 

afterEach(() => { 
    consoleError.restore(); 
}) 

it('should warn on empty propB,() => { 
    // do shallow render of <MyComponent /> 
    expect(consoleError.called).toBe(true) 
    // etc 
})