Sessions is temporarily moving to YouTube, check out all our new videos here.

Jest Styled Components

Michele Bertoli speaking at Reactivate London in March, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Michele has recently released a small library that allows you to seamlessly use Styled Components with Jest's snapshot testing. In this lightning talk he's going to demo it.


Hello, everyone. I'm Michele. I joined Facebook a few months ago. I wrote a book about React. If you know React, but you want to improve your skill, you might find it interesting, and follow me on Twitter if you want to hear more about me. And I'm going to start with this. I used to do [inaudible] development for a long time, but I was very disappointed when I've seen this, because I'm overly into... I love testing a lot. But I got this point. It says, "Unpopular opinion, component unit testing isoverrated," because it says, "Components change very often. They should be very simple, so there are better ways to test components." And one of these ways is Snapshot testing. How many of you use Jest? And how many of you use Snapshot? Basically everyone that uses Jest. That's cool. You should know everyone should use Jest, because it's super cool. But yeah, for those who don't know what Snapshot testing is, basically when you run Jest for the first time, Jest takes a picture of your components, and then you change your components and you run Jest again. Jest takes another picture and it compares the two pictures, and it can tell you what changed, which is really cool. It doesn't tell you if there is something wrong or something right, it just tells you, "Hey, your components are changed." And it works for any serializable objects, not only component. You can take snapshots of your Rexux state, whatever. And Jest is awesome. Styled Components is awesome, as we've seen before. [inaudible] called Jest Styled Components, which must be super awesome. Obviously, because Jest snapshots can answer this question. Did my component change? So when you make a change, Jest tell you...answers, basically, this question, did my component change? When you work with Styled Components, you may want to answer this question. Did my styles change? And in some way, we will see later, Jest can do that. But the biggest question we have is, how did my style change? And Jest snapshot as it is now, it cannot answer this question. So let's see a demo of what it looks like. So this is a test of a very simple style component with the regular snapshots. And you will basically import styles, you create a button and we say that the color is blue. Super, super simple. And then we test that. My button has to be blue, and we render the button with a special React based render, which is able to render the component into a serializable tree. And then as soon as we have the tree, we say to make snapshots. When we run this, Jest generates this, which is basically the snapshot, it's a human readable, serialized, rendered component, which is cool, which is great. But as you can see there, there is a class name. We didn't put any class name there, the Styled Components put the class name, so it's not very useful for you. And let's see what happens when we change the color to red. We save, Jest updates, and Jest tells us, "Hey, your class name is changed," which is okay. So you know that your style has changed, but it's not very useful information because you didn't touch any classes. You changed the style. So I wanted to solve this problem. And the first thing I've done, I created this package and it's made by two modules. The first one is the serializer. Serial... Serializer, okay, let's see if I managed to write it. Jest Styled Components... So we import the serializer, and then we tell Jest to use the serializer. So expect.addSnapshotSerializer. And then we pass the serializer. As soon as we run this, we can see that Jest tells us, "Hey, you added the CSS to your snapshot." Oh, that's cool, that's fine. That's the first part. That's nice. This is the thing that we want. We want it to have the component, the snapshot, but also the style as well. And if the [inaudible] of Jest is super cool, because now to update the snapshot, I just have to press U. Snapshot is updated, so if you go and check your snapshot, you can see that the styles are there. This is the first step. That's cool. But it's not enough, because now if you change my color from blue to red, Jest is going to complain. That's fine. But it tells you, "Hey, the class name is changed, the color's changed, and also the class name again in the component is changed." And it's a little bit too noisy. We didn't change any class name. We don't want to know anything about the class name. We want to know only that the color is changed from blue to red, and this is what the matcher does. So if you import the matcher as well, and then you do expect.extend... Oh, let me put this back to blue, add matcher... Okay, if you add the matcher, nothing happens. The matcher basically adds new matchers to expect. So now we are using expect to match the snapshots, but you cannot any many matchers as you want. In this case, we added, when you do expect.extend, you extend expect, adding a new matcher, and this is called toMatchStyledComponentsSnapshot. And when you save it, nothing happens, but when you change the color from blue to red again, this is what you get. You get the non-relevant changes, so the class name, basically. It's in white, so it's not that much noisy, and you have in green the things that Jest was expecting, and in red the things that changed. So it's pretty easy for you now to tell. And to answer the question, how did my style change? That's it.