Получение дочернего элемента с помощью Enzyme

Question

Я хочу запустить тест, чтобы для моей мелкой энзимной обертки я мог определить, содержит ли эта обертка правильный дочерний элемент. Например, учитывая приведенный ниже код и мою определенную оболочку, я хочу запустить какую-то функцию или что-то еще (someFn()), чтобы я возвращал дочерние элементы в моей оболочке (в данном случае <p>this is some text</p>). Есть ли способ сделать это? В настоящее время wrapper.getElement() вернет мне <div test-attr="div"><p>this is some text</p></div>, что не совсем то, что я ищу. Спасибо!

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

Answer 1

Вы можете использовать метод children() вместе с html().

Вот рабочий тестовый пример:

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