Testen eine Komponente, dessen Kind hat einen Kontext

Question

Ich bin mit der antd Checkbox Komponente in meiner CheckboxWidget Komponente, die Komponente has a contextType defined:

static contextTypes: { 
    checkboxGroup: any 
} 

Ich mag es shallow mit Enzym-Rendering mit testen, so dass ich bin mit dem withContext Helfer von recompose innerhalb des beforeEach Blockes:

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

Allerdings, wenn ich meinen Test wie folgen schreiben:

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

Ich merke, dass der Test fehlschlägt, weil es das Checkbox Widget nicht finden kann. Ich denke, es liegt daran, dass die gerenderte Komponente wird wie folgt aussehen:

<Subject /> 

Ich fand, dass die wrapper.instance() ist Subject und wrapper.instance().children nicht definiert ist. Ich habe versucht, wrapper.dive zu verwenden, aber es scheint nicht auf der wrapper.instance() entweder zu arbeiten.

Answer 1

Es gibt eine einfachere Möglichkeit, etwas in den Kontext zu stellen. Die Funktion shallow akzeptiert Optionen als zweiten Parameter. In den Optionen können Sie den Kontext für die Komponente zu übergeben:

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