thevangelist thevangelist - 4 months ago 23
React JSX Question

ReactJS & Enzyme: Matching elements contents to string

I have simple Intro component in React.js which renders a h1 and a p.

I am trying to write a test for the passed h1 & p strings with Enzyme but I'm unable to do this. What is wrong with this code?

it('description of element is okay <p>', () => {
const wrapper = shallow(<Intro title="Heading of element" description="Description of element" />);
expect(wrapper.find('p').text().to.contain("Description of element")); // This is not working!
});


If I console log the
wrapper.find('p').text()
it's not undefined... And yet the console says like this:

1) (Component) Intro contains a single <p>:
TypeError: Cannot read property 'contain' of undefined
at Context.<anonymous> (test/components/alerts/alert.spec.js:19:12)

Answer

Most probably assertion should look like:

expect(wrapper.find('p').text()).to.contain('Description of element')

expect works like:

expect(something).to.do.something