Does not work with Styled Components

[brentmclark]

I was so excited to find this matcher and then I read the limitations. Specifically:

.toMatchSpecificSnapshot does ignore serializers. It means that you cannot run with e.g. jest-styled-components and similar that make use of expect.addSnapshotSerializer.

Bummer... I am using styled-components. I am not too well-versed in extending jest or its inner working, but I am happy to try making this work with Styled Components. Can you point me in the right direction to get started?

[brentmclark]

I forked this repo and set up a failing test that exhibits the issue with the serializers. You can see it here: https://github.com/brentmclark/jest-specific-snapshot.

It's hacky right now, but I found the serialize function in utils and processed the received from your matcher, but to no avail. If you have any context you can provide for me @igor-dv, it would be most appreciated.

[igor-dv]

Hey @brentmclark , here I wrote what is the problem with the custom serializers.

I've just added the addSerializer method (check in the example) that will help with this. Still didn't publish a new version - would you mind to test it with the styled-components ? Note, you will need to add the styled-components serializer explicitly.

@zvictor - FYI.

[brentmclark]

Thanks @igor-dv, That worked! Check my fork for a working test.

You can run npm run styled-components to see the test pass. Then you can change the color of StyledDiv in /example/styled-components/index.js to blue, and run the test again. Notice it will fail, but only because the color is no longer green. It will not fail because the class names changed, as intended by jest-styled-components.

[igor-dv]

Nice ! will publish then