Test with component has been rendered - reactjs

Question

I am using Jest with Enzyme for unit testing. I have a component that renders components based on the media type. Under unit testing, I am checking if the appropriate component has been rendered.
My Component
const getComponent = {
'image': ImageComp,
'video': VideoComp,
'other': DocumentComp
}
const MediaDisplay = (props) => {
let { assetInfo } = props;
let source = assetInfo.assetUrl;
const PreviewComponent = getComponent[assetInfo.type];
return ( <div>
{source && <PreviewComponent assetInfo={assetInfo} />}
</div>
);
}
In unit testing,
import React from 'react';
import MediaDisplay from './../MediaDisplay';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
describe('<MediaDisplay/>', () => {
it('should render Image component when asset type is image', () => {
const mockAssetInfo = {
assetUrl:'https://example.com/image001.jpg',
type:'image'
};
const component = mount(<MediaDisplay assetInfo={mockAssetInfo} />);
expect(component).toMatchSnapshot();
});
});
I don't think I am writing the test case correctly. Can someone help me write this test case?
P.S - I have a separate test case inside the image component to check if image is rendered, where I am checking if the tag has length.
Thanks a ton in advance.

Answer 1

I think your test is not doing what is suppose to test, because your case is telling that it should render Image component when asset type is image but you're just checking that the component is matching the snapshot, if you're using mount you should be able to see the content of the child components, so for example if your PreviewComponent displays different things depending on the props passed you could test those behaviors. Or if you want to check just that the assetInfo.type is 'image' you can always do:
it("contains an assetInfo image type", () => {
expect(component.prop("assetInfo").type).toEqual(mockAssetInfo.type);
});
And if you only want to check that the child is present and renders successfully you could use shallow instead mount and do this:
import PreviewComponent from "your-component-route"
describe("renders a PreviewComponent", () => {
beforeAll(() => {
const mockAssetInfo = {
assetUrl:'https://example.com/image001.jpg',
type:'image'
};
const component = shallow(<MediaDisplay assetInfo={mockAssetInfo} />);
});
it("wraps a PreviewComponent component", () => {
expect(component.find(PreviewComponent).length).toBe(1);
});
});