how to select element text with react+enzyme

reactjs enzyme
Kevin picture Kevin · Jul 9, 2016 · Viewed 54.3k times · Source

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

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.

Answer

Nelu picture Nelu · Nov 27, 2018

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

Related questions

Simulate a button click in Jest

Simulating a button click seems like a very easy/standard operation. Yet, I can't get it to work in Jest.js tests. This is what I tried (and also doing it using jQuery), but it didn't seem to trigger anything: …

Read More
Enzyme - How to access and set <input> value?

I'm confused about how to access <input> value when using mount. Here's what I've got as my test: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.…

Read More
Jest spyOn function called

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should …

Read More