Test enclosing component inside a React functional component using Jest/Enzyme

Question

I have a component called Post , in which there is an enclosing component called Div . When ran test coverage, it looks like the Div part is not covered. Whereas, the Post got covered. How can I get the Div part covered. Could anyone please help?

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

Here's my test case

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

Answer 1

From your comment, it looks like you have the styled components named Div and Title . If you have export statements for its functions, you can just call them here by sending their props like how you are doing shallow test for components. If you have something like

export const Div = () => {}

export const Title = () => {}

export const Post = () => {}

Your test cases should be

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

This way, you will have entire functional components covered.