測試React組件包含一個帶節點的html節點的最簡單方法是什麼？

當單元測試反應組件時，我經常根據prop的存在或內容檢查是否存在子節點。測試React組件包含一個帶節點的html節點的最簡單方法是什麼？

用酶，我發現在任一淺使用.find或裝入包裝，然後檢查的是長度爲1.寨的元素，這應該是這樣的：

const wrapper = shallow(<MYReactComponent/>); 
const innerNode = wrapper.find('some-css-selector'); 
expect(innerNode.length).to.equal(1);

是否有更好的檢查方式

來源

2016-04-22 Vlad Nicula

假設您正在通過選擇器測試存在性（如您的示例中所示），並且需要使用返回ShallowWrapper的方法，那麼您需要使用.length。但是，你不一定需要單獨的語句是：

const wrapper = shallow(<MYReactComponent />); 
expect(wrapper.find('some-css-selector').length).to.equal(1);

對於這個問題，你可以鞏固整個事情在這樣的情況下，如果你想：

expect(
    shallow(<MYReactComponent />) 
    .find('some-css-selector').length 
).to.equal(1);

如果您所在的測試在組件類型/道具那麼您可以使用，它返回布爾值：

const wrapper = shallow(<MYReactComponent />); 
expect(wrapper.contains(
    <div class="something"> 
    <span>content</span> 
    </div> 
)).to.be.true;

來源

2016-04-22 16:17:39 JMM

謝謝@JMM，我認爲.contains可能是一些用例的解決方案。不過，在大多數情況下，我仍然會被迫使用'.length'，否則我將不得不重新創建我想檢查的內心孩子。 –

@JMM如果你想檢查至少1個孩子，而不是完全1？ –

退房exists()：

expect(wrapper.find(MyComponent).exists()).toEqual(true)

來源

2017-09-13 19:30:21 Piotr

測試React組件包含一個帶節點的html節點的最簡單方法是什麼？

回答

相關問題