How to select element text with react+enzyme

Just what it says. Some example code:

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

Also the html method returns the contents of the element but also the element itself plus all the attributes, e.g. it gives <button class='btn btn-primary'>OK</button>. So I guess, worst case, I can call html and regex it, but...

Is there a way to just get the contents of the element, so I can assert on it.

Solution 1:

If you found this while looking for "includes text", try:

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

Solution 2:

Don't forget that you are passing a node (ReactElement) to shallow function, and there is no HTML attribute class in React. You have to use className.

From React documentation

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

This test should works

const wrapper = shallow(<div><button className='btn btn-primary'>OK</button></div>);
const button = wrapper.find('.btn'); 
expect(button.text()).to.be.eql('OK');

Solution 3:

I think @louis-barranqueiro has probably answered your underlying question. That is, you want a CSS selector and so you should have been using className not class.

However, to try and answer the question of how to select an element's text using the actual example you gave:

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

you'd need to use something like an object property selector, e.g.:

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

or prop syntax:

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

(or even more explicitly):

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

Solution 4:

I ran into this post when searching for ways to select all/some of the text within a textarea within jest and enzyme. For those who are looking for the same thing, you do can the following to select some text (provided you already know the length):

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