Тестирование компонента внутри функционального компонента React с помощью Jest / Enzyme

Question

У меня есть компонент под названием Post, в котором есть включающий компонент под названием Div. При запуске тестового покрытия похоже, что часть Div покрыта не . А вот Post накрыли. Как я могу покрыть часть Div. Может ли кто-нибудь помочь?

const Post = ({id, title}) => (
 <Div>
  <Title name={title} />
 </Div>
);

Вот мой тестовый пример

describe('Post component', () => {
  const props = {
    id: '1',
    title: 'Test',
  };
  it('renders post', () => {
    const component = shallow(<Post {...props} />);
    expect(component).toMatchSnapshot();
  });
});

Answer 1

Судя по вашему комментарию, похоже, что у вас есть стилизованные компоненты с именами Div и Title. Если у вас есть операторы экспорта для его функций, вы можете просто вызвать их здесь, отправив их реквизиты, например, как вы выполняете неглубокий тест для компонентов. Если у вас есть что-то вроде

export const Div = () => {}

export const Title = () => {}

export const Post = () => {}

, ваши тестовые примеры должны быть

describe('Post component', () => {
  const props = {
    id: '1',
    title: 'Test',
  };
  it('renders post', () => {
    const component = shallow(<Post {...props} />);
    expect(component).toMatchSnapshot();
  });

 it('renders Div', () => {
    const component = shallow(<Div {...props} />);
    expect(component).toMatchSnapshot();
  });

 it('renders Title', () => {
    const component = shallow(<Title {...props} />);
    expect(component).toMatchSnapshot();
  });
});

Таким образом, у вас будут охвачены все функциональные компоненты.