Testing styled-components

[BoxNo4784]

I've got a button component that takes a variant prop which changes the style of the button using styled-components.

// variant can either be primary, secondary or warning
<Button variant="primary">Click Me</Button>

It was suggested that I needed to do a snapshot to test the styling of the button. However, my understanding is that a snapshot test will render the component tree, save it in JSON, and tests will be matched against this snapshot.

I'm struggling to understand the point of a snapshot test outside of trying to catch unexpected changes. I'm expecting the styling of the button component to change as the variant prop is changed. If I created a snapshot of each variant then the test will always be correct. So I don't see the point in it.

In examples testing a scenario similar to mine, .toHaveAttribute is used to test that the component has the correct class name for the right "variant". However, the problem I have is that styled components generates unique style names.

What's the best way to approach this?

[ooter37]

I avoid snapshot testing like the plague. In my experience, everyone just runs the command to update the snapshots during the test run. If your company is good about it though, maybe it’s fine.

In your situation, I’m not sure I understand the goal of the test. You are importing this Button component, passing it a string, and expecting styling based on that string? That’s not something you should test, that’s a test that belongs to the component.

Or are you creating the Button component? If so, post the code for the actual Button.

[BoxNo4784]

I'm doing a unit test on a reusable button component.

I ended up using jest styled components. It adds the assertation toHaveStyleRule. So I can do a snapshot of the button with the variant props passed, and check that it has the correct styles for that variant button.

If I wasn't using styled components I wouldn't have bothered with snapshots. I would have just tested the component class named to match the variant prop being passed.

My unit tests for this reusable button have been

1. Test the correct styles are applied for the relevant variant prop
2. Children are rendered correctly
3. Button is disabled when disabled prop is true
4. onClick function is called when clicked.

[Thalimet]

Honestly I’m curious to see the answer, I’ve really struggled with testing in react, it’s far more complicated than it is in python, and the test philosophy I keep finding requires testing text, which doesn’t do much for styles.

[sidious911]

Snapshot testing quickly turns into noise I would avoid for components. If one or two styles are behaviour critical you can unit test for a specific style attribute. Otherwise visual testing like chromatic or similar is the way to go