如何測試酶/摩卡/柴中div或其他元素的含量？

Question

我想驗證一個div的內容匹配我所期望的。我擁有的是：

expect(wrapper.find('div.title').text().to.equal('A New Day'); 

但是，這不適用於我。這是酶/柴/摩卡中可能的嗎？

感謝

Answer 1

你正在尋找的屬性是textContent

expect(wrapper.find('div.title').textContent).to.equal('A New Day');

如果使用的是薛寶釵，這聽起來像你，你可以添加自定義斷言。這是我爲我們的項目編寫的一個。

// Asserts that the the DOM Element has the expected text 
// E.G. expect(myDOMNode).to.have.text('the text'); 
const text = Assertion.addMethod('text', function(value) { 
    this.assert(
    this._obj.textContent === value, 
    'expected #{exp} === #{act}', 
    'expected #{exp} !== #{act}', 
    this._obj.textContent, 
    value 
); 
}); 

Answer 2

您可以很容易地設置chai-enzyme https://github.com/producthunt/chai-enzyme這是非常偉大的這樣的事情。現在你可以使用：

expect(wrapper.find('.title')).to.have.text('A New Day')

Answer 3

取決於你有多少反應，和/ JSX在你的文本內容，它可能會錯位，使簡單的匹配失敗：

// wrapper.text() 
<!-- react-text: 28 -->A <!-- /react-text --> 
<!-- react-text: 29 -->New<!-- /react-text --> 
<!-- react-text: 30 --> Day<!-- /react-text --> 

所以，如果你必須測試直接，你可以帶他們出去，像這樣：

expect(wrapper.text().replace(/<!--[^>]*-->/g, "")).toContain("A New Day"); 

正則表達式從this answer，它警告說，不要正則表達式的HTML來了。但反應節點評論相對簡單。

---

p.s.測試道具通常是一個更好的主意;反應的HTML渲染已經通過facebook單元測試