CODEWITHSUNDEEP
javascriptreactjstypescriptenzyme
noblerare
noblerare

Reputation: 11943

React component unit test with enzyme fails when rendering Image tag with svg

I am using React with Typescript and using Jest and Enzyme for unit testing. I am trying to unit test the following component (simplified, of course):

import image1 from 'path/to/image1.svg';
import image2 from 'path/to/image2.svg';

export const ShowImage: React.StatelessComponent<{isTab1: boolean, someId: number, isTab2: boolean }> = ({ isTab1, someId, isTab2}) => (
    <td>
        {isTab1 !== true && someId === 1 && !isTab2 ?
            <Image1 />
            :
            null
        }
        {isTab1 !== true && someId === 2 && !isTab2 ?
            <Image2 />
            :
            null
        }
    </td>
);

export const Image1 = () => (
    <Image src={image1} />
);

export const Image2 = () => (
    <Image src={image2} />
);

The Image tag is a React Bootstrap tag. I am testing the ShowImage component in a test file like so:

import * as React from 'react';
import * as Enzyme from 'enzyme';
import { mount, shallow } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-15';

Enzyme.configure({ adapter: new Adapter() });

function setupShowImageComponent(isTab1: boolean, someId: number, isTab2: boolean): any {
    const props = {
        isTab1: isTab1,
        someId: someId,
        isTab2: isTab2
    };

    const enzymeWrapper = mount(<ShowImage {...props} />);

    return {
        props,
        enzymeWrapper
    }
}

describe('Test ShowImage Component', () => {
    it('false, 1, false', () => {
        const { enzymeWrapper } = setupShowImageComponent(false, 1, false);

        expect(enzymeWrapper.find('td')).toHaveLength(1);    
        expect(enzymeWrapper.find('Image1')).toHaveLength(1); // fails: receives length 0
        expect(enzymeWrapper.find('Image2')).toHaveLength(0);
    });

    it('false, 2, false', () => {
        const { enzymeWrapper } = setupShowImageComponent(false, 2, false);

        expect(enzymeWrapper.find('td')).toHaveLength(1);    
        expect(enzymeWrapper.find('Image1')).toHaveLength(0);
        expect(enzymeWrapper.find('Image2')).toHaveLength(1); // fails: receives length 0
    });
});

Both of these tests fail. Other React components that I am testing pass fine but this one eludes me. Any help would be greatly appreciated. It is important to note that this used to work but when I migrated my code over to use TypeScript, these two tests failed.

UPDATE

After some experimentation, if I test for the existence of the Image tag rather than Image1 or Image2 it works. It seems that it does not recognize the functional component but rather its children instead? I'm confused here. How can I test if it's specifically Image1 or Image2 instead of just testing Image? Again, this worked in with Javascript but is not working with TypeScript.

Upvotes: 0

Views: 978

Answers (1)

noblerare
noblerare

Reputation: 11943

I found a solution that works. Instead of doing: 

expect(enzymeWrapper.find('Image1')).toHaveLength(1); // fails

do:

expect(enzymeWrapper.find(Image1)).toHaveLength(1); // passes

I'm not sure if this is the best solution but it's something that gets me past my issues.

Upvotes: 1

Related Questions