2017-06-22 14 views
0

でレンダリングされていないです:小道具は、私は、次のユニットテストを持って浅い酵素小道具クエリ

const wrap = (props = {}) => shallow(<Col {...props} />).dive(); 

describe('Col',() => { 
    it('should render a 100% wide div by default',() => { 
    const wrapper = wrap(); 

    console.log(wrapper.unrendered.props); 
    expect(wrapper.props().w).toBe(1); 
    expect(wrapper.type().target).toBe('div'); 

次のようになります返されwrapper

ShallowWrapper { 
    root: [Circular], 
    unrendered: 
    { '$$typeof': Symbol(react.element), 
     type: 
     { [Function: StyledComponent] 
      withComponent: [Function: withComponent], 
      contextTypes: [Object], 
      displayName: 'styled.div', 
      styledComponentId: 'sc-ifAKCX', 
      attrs: undefined, 
      componentStyle: [Object], 
      warnTooManyClasses: [Function], 
      target: 'div' }, 
     key: null, 
     ref: null, 
     props: { w: 1, children: undefined }, 
     _owner: null, 
     _store: {} }, 

私がテストしたいので、小道具をwは、のunrenderedという名前のプロパティにありますが、ラッパーにはありません。

この未レンダリングされたオブジェクトが何であるか、なぜそのプロパティがラッパーにないのか混乱します。

答えて

0

未レンダリングされたオブジェクトは、ShallowWrapperの実装の詳細です。 ShallowWrapper:https://github.com/airbnb/enzyme/blob/91bf86183b08337a45c2415e89868ea46fae81c3/src/ShallowWrapper.jsのソースを調べることによって、どのように使用されているかを見ることができます。

あなたが特定の小道具wをテストしたい場合は、小道具()APIを使用:あなたはすでにunrenderedをログに記録する行の下のコードの行でこれをやっているhttp://airbnb.io/enzyme/docs/api/ShallowWrapper/props.html

を。コンポーネントをテストする目的でラッパーの実装の詳細について心配する必要はありません(実装の詳細が変更される可能性があるため、未確認のテストを作成しないでください)。代わりに、公開API(この場合はprops()メソッド)に依存します。