測試其子有一個上下文

Question

我使用antd Checkbox成分在我CheckboxWidget組件的組件，該組件has a contextType defined：

static contextTypes: { 
    checkboxGroup: any 
} 

我想它使用shallow與酶的渲染測試，所以我使用在beforeEach塊內從recomposewithContext幫手：

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小部件。我想這是因爲渲染的成分會像：

<Subject /> 

我發現wrapper.instance()是Subject和wrapper.instance().children是不確定的。我試圖使用wrapper.dive，但它似乎也沒有在wrapper.instance()上工作。

Answer 1

有一種更簡單的方法來將東西放入上下文中。 shallow函數接受選項作爲第二個參數。在選項，你可以通過上下文組件：

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) 
})