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");

正则表达式来自this answer，它警告正则表达式html。但是反应节点评论相对简单。

P.S。测试道具通常是一个更好的主意; react的html渲染已经由facebook进行了单元测试

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

3 个答案: