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

IT技术 reactjs enzyme
2021-05-18 09:24:30

就是它所说的。一些示例代码:

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它并对其进行正则表达式,但是......

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

4个回答

如果您在查找"includes text" 时发现了这一点,请尝试:

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

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

来自 React 文档

所有属性都是驼峰式的,并且属性classfor分别是 classNamehtmlFor,以匹配 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');

我认为@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');

或props语法:

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

(或更明确地):

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

寻找方法来选择全部/部分文本中的,当我遇到了这篇文章textareajestenzyme对于那些正在寻找相同内容的人,您可以执行以下操作来选择一些文本(前提是您已经知道长度):

let wrapper;
let textareaNode;
beforeEach(() => {
    wrapper = mount(<Textarea value="Hello world" />);
    textareaNode = () => wrapper.find("textarea").getDOMNode();
});

it("selects all of the select within the given range", () => {
    textareaNode().setSelectionRange(0, 6);
    wrapper.find("button").simulate("click"); // this would delete the selection via a ref
    expect(wrapper.find("textarea").props().value).toEqual("world");
});