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