如何渲染組件中的假DOM中的酶？

我有一個組件庫，我有一個Tooltip組件，該組件在文檔正文的底部呈現tooltip div。如何在假DOM中渲染Tooltip組件，然後測試div元素是否在我徘徊於Tooltip組件之後出現？如何渲染組件中的假DOM中的酶？

所以：

首先我必須來渲染/第一安裝一個工具提示組件。
模擬一個事件fe wrapper.find('span').simulate('mouseenter')
檢查<div>元素是否出現在正確的位置（作爲最後一個身體的孩子）。

我被困在第1和第3點。我該如何在Jest /酶中測試它？我應該使用JSDom嗎？

來源

2017-08-17 Wojciech Jeleń

您所描述的是一個功能測試。爲此，最好使用像**守夜**這樣的框架。如果你想使用酶，那麼只需測試工具提示是否正確渲染，並通過簡單的單元測試來測試事件是否被觸發。 – Hosar

謝謝你本來的建議nightwatch-我會試試看！ –

我做了這樣的似乎工作，因爲酵素讓你在全球範圍文檔對象，你可以參考一下，開箱：

test("shows tooltip when mouse enters child element",() => { 
    const div = global.document.createElement("div"); 
    global.document.body.appendChild(div); 

    const wrapper = mount(
    <Tooltip content="You got me!"> 
     <p>Hello</p> 
    </Tooltip>, 
    { attachTo: div } 
); 

    wrapper.ref("overlay").simulate("mouseEnter"); 

    // do stuff... 
});

問題是與我的組件本身。這個很複雜，我不知道爲什麼在測試過程中，我模擬onMouseEnter之後，它會觸發onMouseLeave。但測試符合我的預期與其他一些更瑣碎的工具提示組件雖然Oo

來源

2017-08-20 16:48:55

如何渲染組件中的假DOM中的酶？

回答

相關問題