CODEWITHSUNDEEP
javascriptreactjstypescript
Middledumbcat
Middledumbcat

Reputation: 13

findByType function not finding property?

I'm writing tests for components I have main component Icon

const Icon: React.FC<IIconPropTypes> = ({ size, color, icon, onClick, blockEvents }) => (
  <IconWrapper onClick={onClick} blockEvents={blockEvents}>
    <IconSvg color={color} hasClick={!!onClick} width={size}>
      <path d={ICONS_PATH[icon]} />
    </IconSvg>
  </IconWrapper>
);

and IconSvg which I am testing

const IconSvg = styled.svg<IIconSvgProps>`
  cursor: ${(props) => (props.hasClick ? 'pointer' : 'default')};
  display: inline-block;
  vertical-align: middle;
  width: ${(props) => (props.width ? `${props.width}px` : '100%')};
  path {
    fill: ${(props) => (props.color ? props.color : '#edcd7d')};
    transition: all 0.3s;
  }
`;

This is how my test looks like

it('matches snapshot and renders without color prop', () => {
    const [hasClick, width] = [true, 100];
    const component = renderer.create(<IconSvg hasClick={hasClick} width={width}/>);
    const tree = component.toJSON() as ReactTestRendererJSON;
    expect(tree).toMatchSnapshot();
    expect(component.root.findByType('path')).toHaveStyleRule('fill', '#edcd7d');
  })

But findByType cannot find the path, and therefore the fill property, can anyone know what the error is and how to reach it?

Upvotes: 1

Views: 489

Answers (1)

Sam R.
Sam R.

Reputation: 16450

You are testing your IconSvg component here:

let component = renderer.create(<IconSvg hasClick={hasClick} width={width}/>);

According to your code IconSvg is just a styled svg. You need to test Icon component which has a path element in it:

let component = renderer.create(<Icon size={} color={} icon={} onClick={} blockEvents={} } />);

Upvotes: 1

Related Questions