How do I test props in a React stateless functional component?

Question

With Jest and Enzyme, I am trying to test that my Logo component receives the right props (id, height, width, active, disableTransparency).

I have tried creating an instance (wrapper.instance()), but this returns null. I have also tried wrapper.getElement().props, and this returns the props for the components rendered.

const Logo = ({id, height, width, active, disableTransparency}) => (
    <Svg x='0px' y='0px' height={height} width={width} viewBox='0 0 1000 1000'>
        {(active) && <Gradient id={id}/>}
        {(disableTransparency) && <Underlay/>}
        <Overlay id={id} active={active}/>
    </Svg>
);

You could use jest “called with”? As a functional component is just a function it kinda doesn’t matter if it receives the props, but rather what it does with them. — evolutionxbox
Also I don’t think “functional components” don’t have instances, which is why they don’t have access to life cycle methods. — evolutionxbox

Justin Foss Justin Foss · Accepted Answer · 2018-08-21T21:38:12

Have you tried wrapper.props()? This is how I typically get at a component's props when using Enzyme.

How do I test props in a React stateless functional component?

1 Answers