2017-06-13 3 views
0

私は私のCheckboxWidgetコンポーネントでantd Checkboxコンポーネントを使用していますを持っているコンポーネント、コンポーネントhas a contextType definedテストその子コンテキスト

static contextTypes: { 
    checkboxGroup: any 
} 

私はそれが酵素でレンダリングshallowを使ってテストしたいと思いますので、私が使用していますbeforeEachブロック内recomposeからwithContextヘルパー:

describe('Simple Checkbox Widget',() => { 
    beforeEach(() => { 
    withContext({ 
     getChildContext: function() { 
     return {checkboxGroup: null} 
     }, 
     childContextTypes: { 
     checkboxGroup: shape({ 
      disabled: bool, 
      toggleOption: func, 
      value: array 
     }) 
     } 
    })(CheckboxWidget) 
    }) 
}) 

しかし、私はこのような私のテストを記述します。

it('renders a checkbox from Antd',() => { 
    const wrapper = shallow(<Subject />) 
    const actual = wrapper.find(AntdCheckbox).length 
    const expected = 1 
    expect(actual).toEqual(expected) 
}) 

Checkboxウィジェットが見つからないため、テストに失敗していることがわかりました。私はwrapper.instance()Subjectwrapper.instance().childrenが未定義であることがわかっ

<Subject /> 

:私は次のようにレンダリングされたコンポーネントが見えますので、それはあると思います。 wrapper.diveを使用しようとしましたが、wrapper.instance()でも動作していないようです。

答えて

1

文脈に何かを入れる方が簡単です。 shallow関数は、2番目のパラメータとしてオプションを受け入れます。あなたがコンポーネントのコンテキストを渡すことができますオプションで:

it('renders a checkbox from Antd',() = > { 
    const wrapper = shallow(< Subject/> , { 
    context: { 
     checkboxGroup: checkboxGroup: shape({ 
     disabled: bool, 
     toggleOption: func, 
     value: array 
     }) 
    } 
    }) 
    const actual = wrapper.find('AntdCheckbox').length 
    const expected = 1 
    expect(actual).toEqual(expected) 
}) 
+0

私は 'shallowOptionsは、あなたが提供されるオプションであることと、'浅い(、shallowOptions)に ''マウント(、mountOptions)を使用して、私のテストを変換します。ありがとうございました – vamsiampolu

関連する問題