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

Javascript 如何测试酶/摩卡/柴中div或其他元素的含量?,javascript,reactjs,mocha.js,chai,enzyme,Javascript,Reactjs,Mocha.js,Chai,Enzyme,我试图验证div的内容是否符合我的预期。我得到的是: expect(wrapper.find('div.title').text().to.equal('A New Day'); 然而,这对我不起作用。这在酶/柴/摩卡咖啡中可能吗 谢谢您要查找的属性是textContent expect(wrapper.find('div.title').textContent).to.equal('A New Day') 如果您使用的是chai(听起来很像),那么可以添加一个自定义断言。这是我为我们的项目写

我试图验证div的内容是否符合我的预期。我得到的是:

expect(wrapper.find('div.title').text().to.equal('A New Day');
然而,这对我不起作用。这在酶/柴/摩卡咖啡中可能吗


谢谢

您要查找的属性是
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
  );
});

你可以很容易地设置一个非常适合这样的东西。现在您可以使用:


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

根据文本内容中React/JSX的多少,它可能会损坏,导致简单匹配失败:

// wrapper.text() 
<!-- react-text: 28 -->A <!-- /react-text -->
<!-- react-text: 29 -->New<!-- /react-text -->
<!-- react-text: 30 --> Day<!-- /react-text -->
//wrapper.text()
A.
新的
白天
因此,如果您必须直接测试,您可以这样将其剥离:

expect(wrapper.text().replace(/<!--[^>]*-->/g, "")).toContain("A New Day");
expect(wrapper.text().replace(//g,”).toContain(“新的一天”);
正则表达式来自,它警告不要使用正则表达式html。但react节点注释相对简单


p、 测试道具通常是一个更好的主意;react的html呈现已经过facebook的单元测试