如何單元測試依賴視覺數據的React組件

我正在構建一個響應類別欄，將所有不可見類別置於下拉內。所有這些類別名稱都有一個不固定的寬度（這取決於文本）。我正在使用Jest &酶進行測試。如何單元測試依賴視覺數據的React組件

基本上，組件需要做的是計算不適合可見欄的所有類別，並在組件狀態中填充名爲invisibleCategories的數組以填充下拉數據。

哪個單元測試會更好？由於邏輯數據和狀態取決於視覺環境，我不確定設置測試的正確方法。你會在一個固定寬度的div（即1000px）中安裝組件，設置一個類別列表（即類別1，類別2，長類別3，短4 ...），知道哪些類別應該在給定的環境中可見和測試它？或者有更多的動態模式來測試依賴視覺數據的邏輯？

來源

2017-08-22 xpander001

我不知道是否有類似的東西可以用Jest來完成，希望別人能夠在Jest中提供一個解決方案，但我認爲所有這種類型的測試框架都有其侷限性到ui。

除了Jest之外，您可以考慮使用不同的測試框架，這是專門爲測試UI而量身打造的。我喜歡storybook，它的想法是爲你的組件創建一堆測試用例。然後你點擊你的測試，目測他們，並確保他們都看起來正確。它不是自動化的，但它是非常有用的，可以快速確保您的組件沒有視覺上損壞。

在您的例子，你會創建一個「故事」，像這樣：

storiesOf('CategoryBar', module) 
.add('Few items',() => (
    <CategoryBar> 
    <Item/> <Item/> 
    </Category> 
)) 
.add('To many items',() => (
    <CategoryBar> 
    <Item/> <Item/> <Item/> <Item/> 
    </CategoryBar> 
))

然後，你將獲得其中兩個可用於快速確保一切按預期工作的故事書應用程序中的標籤。

對不起，我沒有在Jest中做的方法。

來源

2017-08-22 14:37:16

如何單元測試依賴視覺數據的React組件

回答

相關問題