mardi 24 septembre 2019

How to test React dynamic style prop?

Am teaching myself React and am starting on testing. Using the recommended stuff from the docs... create-react-app, jest, testing-library/react. I have a component that renders a dynamic style, something like this

const ScalingDiv = (props) => (
    <StyledDiv size={props.size || 42}>
        <OtherEl>
            {props.text}
        </OtherEl>
    </StyledDiv>
);

I would like to verify that my logic in there is working correctly (that 42 is used as a fallback size). I cannot find any examples or docs of this. I had hoped that something like this would work-

test('check fallback size', async () => {
    const {container} = render(<ScalingDiv/>);
    expect(container.firstChild).toHaveAttribute('size', 42);
});

But I haven't found any combination of matchers and queries that returns ANY attributes. Then I tried to just check the style directly using jest-dom, but toHaveStyle('this_isnt_valid_css: 199') passes- I couldn't stick anything in there to get it to fail. So... what is the right way to do this?

Aucun commentaire:

Enregistrer un commentaire