如何测试酶/摩卡/柴中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单元测试