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

不要忘记您正在将节点（ReactElement）传递给shallow函数，并且React中没有HTML属性class。您必须使用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 2

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

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

Answer 3

我认为@ louis-barranqueiro可能已经回答了你的基本问题。也就是说，您需要一个CSS选择器，因此您应该使用className而不是class。

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

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

您需要使用类似object property selector的内容，例如：

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

或prop语法：

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

（或者更明确地说）：

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

Answer 4

在寻找在textarea和jest中选择enzyme内所有/某些文本的方法时，我遇到了这篇文章。对于正在寻找相同内容的用户，可以执行以下操作以选择一些文本（前提是您已经知道长度）：

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

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

4 个答案: