53

正是它所说的。一些示例代码：

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

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

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

该html方法还返回元素的内容以及元素本身以及所有属性，例如它给出的<button class='btn btn-primary'>OK</button>。所以我想，最坏的情况，我可以调用html它并对其进行正则表达式，但是......

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

4

4 回答 4

54

如果您在查找"includes text"时发现此问题，请尝试：

it('should show correct text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.text().includes('my text')).toBe(true);
});
于 2018-11-26T23:19:16.260 回答
41

不要忘记你是在传递一个节点（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');
于 2016-07-11T11:59:14.277 回答
7

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

于 2016-12-13T11:42:44.520 回答
3

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

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");
});
于 2020-02-06T18:59:01.207 回答