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
andfor
areclassName
andhtmlFor
, 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');