how to select element text with react+enzyme

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

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

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

Tags:

Reactjs

Enzyme