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

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

образецКомпонент.js:

import React from 'react';

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

export default 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);
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(div.children().debug());
    expect(div.children().html()).toEqual(expectedChildElement);
});

Другие вопросы по теме