Тестирование бурения с использованием Enzyme

Question

Я хочу написать интеграционный тест, чтобы утверждать, что, когда родительский компонент детализирует определенные значения или свойства дочернему компоненту, этот компонент получает указанные значения и правильно их отображает.Ниже у меня есть два примера компонентов и пример теста.Конечно, тест не точный, но мне интересно, как я могу использовать фермент для достижения этой цели?Спасибо!

sampleComponent.js:

import React from 'react';

const SampleComponent = () => (
  <div test-attr="div">
    <SampleChildComponent title="Sample title" />
  </div>
);

export default SampleComponent;

sampleChildComponent.js:

import React from 'react';

const SampleChildComponent = ({ title }) => <h3 test-attr="h">{title}</h3>;

export default SampleChildComponent;

sampleComponent.test.js:

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

test('renders component without errors', () => {
  const wrapper = shallow(<SampleComponent />);
  const childWrapper = shallow(<SampleChildComponent />);
  expect(childWrapper.text()).toEqual('sample title');
});

Answer 1

Для рендеринга дочерних компонентов вы должны использовать mount вместо shallow:

import { mount } from 'enzyme'
import React from 'react'
import SampleChildComponent from './sampleChildComponent'
import SampleComponent from './sampleComponent'

test('renders component without errors', () => {
  const wrapper = mount(<SampleComponent />)
  expect(wrapper.find(SampleChildComponent).text()).toEqual('sample title')
})