測試墊圈層組件

我正在使用帶反應的墊圈來渲染我的應用程序的用戶界面。用戶單擊按鈕時顯示一個圖層組件。一切正常，但我不知道如何測試圖層的孩子。我使用酶，摩卡和柴作爲測試套件。這是代碼我的組件的代碼：測試墊圈層組件

<Layer align="right" closer> 
    <Header size="large" justify="between" align="center"> 
     <Button icon={<CloseIcon />} plain={true} onClick={ props.hide }/> 
    </Header> 
    <Section key={index} pad={{ horizontal: 'large', vertical: 'small' }}> 
     { props.list } 
    </Section> 
</Layer>

，這是我的測試：

const wrapper = shallow(<MyComponent />); 
const layer = wrapper.find(Layer); 

//this works 
expect(layer).to.have.length.of(1); 

const section = layer.find(Section); 

//and this fails 
expect(section).to.have.length.of(1);

尋找在應用程序的渲染分量，我發現墊圈使他的層組件以這種方式：

<Layer><span style={{ display: 'none'}}></span></Layer>

任何人都可以幫到我嗎？謝謝

來源

2017-06-20 alessia pileri

如果你看看source code for the layer component，你會看到它返回你在render方法中發佈的跨度。直到組件通過調用Layer類中的addLayer方法安裝layer's contents will be rendered。

我相信你應該使用酶的mount函數來測試Layer是否正確地呈現它的內容，因爲你會想要調用componentDidMount方法。

來源

2017-06-20 16:30:34

我嘗試使用mount來代替淺，但結果相同。我發現跨度不在測試環境中，但是在開發應用程序時，使用chrome開發人員檢查我的頁面時會反應出Tools。我也注意到圖層的內容在整個應用程序之外渲染，但它沒有意義！ –

嘿@alessia，這是正確的。通過[代碼]（https://github.com/grommet/grommet/blob/master/src/js/components/Layer.js#L218-L233）看起來，它看起來像圖層被添加到DOM後安裝所以測試的結果是正確的。 –

我找到了一個答案，其中包含使用酶和JSDom測試實際DOM的說明。請參閱[這裏]（https://stackoverflow.com/a/38424409/5948656）。 –

測試墊圈層組件

回答

相關問題