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

Question

我正在嘗試驗證div的內容是否符合我的預期。 我有的是：

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

但是，這對我不起作用。 這可能是酶/柴/摩卡嗎？

謝謝

Answer 1

您可以輕松設置chai-enzyme https://github.com/producthunt/chai-enzyme ，這對於這樣的事情非常有用。 現在你可以使用：

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

Answer 2

您正在尋找的屬性是textContent

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

如果你正在使用chai，它聽起來像你，你可以添加自定義斷言。 這是我為我們的項目寫的那個。

// 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 3

根據您在文本內容中使用的React / 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");

正則表達式來自這個答案 ，它反對正則表達式html。 但反應節點評論相對簡單。

---

ps測試道具通常是一個更好的主意; react的html渲染已經由facebook進行了單元測試