如何用react +酶选择元素文本

Question

正如它所说的那样.一些示例代码:

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>);

const b = wrapper.find('.btn'); 

expect(b.text()).to.be.eql('OK'); // fails,

此html方法还返回元素的内容,但也返回元素本身以及所有属性,例如它给出<button class='btn btn-primary'>OK</button>.所以我猜,最坏的情况是,我可以打电话html和正则表达,但......

有没有办法只获取元素的内容,所以我可以断言它.

Answer 1

如果您在寻找“包含文本”时发现了此问题，请尝试：

it('should show correct text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.text().includes('my text')).toBe(true);
});

Answer 2

不要忘记您正在将节点(ReactElement)传递给shallow函数,并且classReact中没有HTML属性.你必须使用className.

来自React文档

所有属性都是骆驼套管和属性class,并for有 className和htmlFor,分别匹配DOM API规范.

这个测试应该有效

const wrapper = shallow(<div><button className='btn btn-primary'>OK</button></div>);
const button = wrapper.find('.btn'); 
expect(button.text()).to.be.eql('OK');

Answer 3

我认为@louis-barranqueiro 可能已经回答了您的潜在问题。也就是说，您需要一个 CSS 选择器，因此您应该一直使用classNamenot class。

但是，要尝试使用您提供的实际示例回答如何选择元素文本的问题：

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>);

您需要使用类似对象属性选择器的东西，例如：

expect(wrapper.find({ class: "btn btn-primary" }).text()).to.equal('OK');

或道具语法：

expect(wrapper.find('[class="btn btn-primary"]').text()).to.equal('OK');

（或更明确地）：

expect(wrapper.find('button[class="btn btn-primary"]').text()).to.equal('OK');