CODEWITHSUNDEEP
javascriptreactjsjestjsenzyme
Jimmy
Jimmy

Reputation: 3860

Getting child element with Enzyme

I want to run a test, such that for my shallow enzyme wrapper, I can determine if that wrapper contains the correct child element. For example, given the below code and my defined wrapper, I want to run some kind of function or something (someFn()) so that I return the child elements within my wrapper (in this case, <p>this is some text</p>). Is there a way to do this? Currently wrapper.getElement() will return me <div test-attr="div"><p>this is some text</p></div>, which is not exactly what I'm looking for. Thanks!

sampleComponent.js:

import React from 'react';

const SampleComponent = () => (
  <div test-attr="div">
    <p>this is some text</p>
  </div>
);

export default SampleComponent;

sampleComponent.test.js:

import React from 'react';
import { shallow } from 'enzyme';
import SampleComponent from './sampleComponent';

test('renders icon without errors', () => {
  const wrapper = shallow(<SampleComponent />);
  const div = wrapper.find('[test-attr="div"]');
  const expectedChildElement = <p>this is some text</p>;
  expect(div.someFn()).toEqual(expectedChildElement);
});

Upvotes: 1

Views: 397

Answers (1)

Saurabh Nemade
Saurabh Nemade

Reputation: 1582

You can use children() method along with html().

Here is the working test case: 

import React from 'react';
import { shallow } from 'enzyme';
import SampleComponent from './sampleComponent';

test('renders icon without errors', () => {
    const wrapper = shallow(<SampleComponent />);
    const div = wrapper.find('[test-attr="div"]');
    const expectedChildElement = "<p>this is some text</p>";
    //console.log(div.children().debug());
    expect(div.children().html()).toEqual(expectedChildElement);
});

Upvotes: 1

Related Questions