如何使用 react+enzyme select 元素文本

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'); // fail

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

有没有办法只获取元素的内容，这样我就可以对其进行断言。

Answer 1

不要忘记您正在将一个节点（ReactElement）传递给 shallow 函数，并且 React 中没有 HTML 属性 class。你必须使用 className.

来自 React 文档

All attributes are camel-cased and the attributes class and for are className and htmlFor, respectively, to match the DOM API specification.

这个测试应该有效

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

我认为@louis-barranqueiro 可能已经回答了您的基本问题。也就是说，你想要一个 CSS selector 所以你应该使用 className 而不是 class.

但是，要尝试回答如何使用您给出的实际示例 select 元素文本的问题：

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');

或道具语法：

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

（或更明确）：

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

Answer 3

如果您在查找 "includes text" 时发现了这个，请尝试：

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

Answer 4

我运行在搜索 select all/some textarea 和 jest 中的文本时 post enzyme。对于那些正在寻找相同内容的人，您可以对 select 一些文本执行以下操作（前提是您已经知道长度）：

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+enzyme select 元素文本

How to select element text with react+enzyme

reactjs

enzyme