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

Posted 2023-02-21

【中文标题】如何使用 react+enzyme 选择元素文本

【英文标题】：How to select element text with react+enzyme

【发布时间】：2016-11-11 15:25:49

【问题描述】：

正如它所说的那样。一些示例代码：

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

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

【问题讨论】：

是否可以检查它的文本长度？

【参考方案1】：

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

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

【讨论】：

对我来说，无论如何这都会返回true。如果您正在使用它，您应该尝试有目的地使其在您的用例中失败。我需要做一个mount 而不是shallow 才能工作。

【参考方案2】：

不要忘记你正在将一个节点（ReactElement）传递给shallow 函数，并且React 中没有class 的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');

【讨论】：

没有课怎么找？另外，如果它不在页面树的顶部怎么办？

【参考方案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');

【讨论】：

如果您仔细阅读问题，作者尝试选择带有wrapper.find('.btn');的按钮。基于此，很明显，他想使用class HTML 属性，而不是自定义 HTML 属性。所以他必须使用className React DOM 属性，因为class 在 React DOM API 中不存在。

是否可以对其文本长度进行检查/布尔检查？

【参考方案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");
);