mardi 18 septembre 2018

Test radius of circle svg element, React and Enzyme

I'm going through my react app and implementing my testing and I can't figure out how to test the radius of an svg circle. The radius is passed down through props. My React component is below;

import * as React from 'react';

export interface Props {
    radius: number
}

const UserPicture = (props: Props) => {

    var diameter = props.radius * 2;

    return (
        <svg className="userPicture" height={diameter} width={diameter}>
            <circle cx={props.radius} cy={props.radius} r={props.radius} stroke="black" fill="white" />
        </svg>
        )
}

export default UserPicture;

...and the test I can't get to work currently looks like the below.

test('User Picture renders svg > circle element with correct radius passed by props second test', () => {
    const radius = 15;
    const userPicture = Enzyme.shallow(<UserPicture radius={radius} />);
    expect(userPicture.find('svg > circle').at(0).prop("r")).toBe(radius);
});

I know this test is finding the circle as I have a "must render without crashing" function working but the test above is returning undefined. There doesn't seem to be a way to return the height, width or anything using enzyme (unless through .prop), am I missing something? How can I test the radius of an svg circle?

Aucun commentaire:

Enregistrer un commentaire