CODEWITHSUNDEEP
reactjsunit-testingjestjsenzyme
VHaarish
VHaarish

Reputation: 81

Expect a component to be rendered

I have a component in react that renders another component based on the type using Enum properties. I am testing if appropriate component is rendered by mocking various types using Jest and Enzyme. I am new to react and Jest and I am having trouble with my test cases. Please can someone help me resolve this?

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

Unit Test:

import React from 'react';
import MediaDisplay from './../MediaDisplay';
import Enzyme, { shallow ,mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ImageComp from './../ImageComp';
import { mockAssetInfo } from '../../mocks/index';
Enzyme.configure({ adapter: new Adapter() });


describe('renders a PreviewComponent', () => {

     it("wraps a ImageComp component", () => {
        const component = shallow(<MediaDisplay assetInfo={mockAssetInfo} />);
        expect(component.find(ImageComp)).toHaveLength(1);
    }); 
});

MockAssetInfo:

export const mockAssetInfo = {
  url: "https://example.com/image002.jpg",
  name: "example",
  type: "image",
  thumb: "https://example.com?image0011.jpgch_ck=1212334354",
  isAssetPublished:true
}

The error, expect(received).toHaveLength(expected)

Expected length: 1
Received length: 0
Received object: {}

Upvotes: 1

Views: 1062

Answers (1)

Karthick Vinod
Karthick Vinod

Reputation: 1437

mockAssetInfo object does not have the key assetUrl. So, PreviewComponent is not rendered as source is undefined in the line

{source && <PreviewComponent assetInfo={assetInfo} />}

Upvotes: 1

Related Questions