jest-emotion and snapshot-diff not playing nice

Current behavior:

jest-emotion doesn’t appear to work as a serializer for snapshot-diff. Tried various permutations of the config and the test setup but it doesn’t play nice. It’s unclear if this is a problem with the docs or an API thing.

To reproduce:

Minimal repo: https://github.com/DarkPurple141/jest-emotion-typescript-minimal/tree/master

1. install dependencies and run jest

Expected behavior:

Environment information:

• react version: 16.9
• emotion version: 10.0.28

[Andarist]

I’ve looked very quickly and some of my findings are:

• snapshot-diff is not using by default builtin serializers, it only uses a wrapper around react serializer which is based on React elements, react-test-renderer, etc. So it doesn’t work with JSDOM output
• it also only works with old serializer API - the one using { test, print } interface when the new API is using { test, serialize }, this makes it impossible to reuse all current jest’s builtin serializers because they are written using the new API.

[Andarist]

Ok, I’ve managed to see what’s your issue but it wasn’t at all apparent where I should look for it as you have provided 3 different test files without pointing to a specific problem. app.test.tsx gave me an answer but this was the last place I was looking into.

It seems that toMatchDiffSnapshot just doesn’t run through added custom serializers: https://github.com/jest-community/snapshot-diff/blob/2d81e0a5ca04f682cebf13cf94c9dd369d4c81c7/src/index.js#L89 https://github.com/jest-community/snapshot-diff/blob/2d81e0a5ca04f682cebf13cf94c9dd369d4c81c7/src/index.js#L37 but it seems that you maybe can tell it to run through by using setSerializers: https://github.com/jest-community/snapshot-diff/blob/2d81e0a5ca04f682cebf13cf94c9dd369d4c81c7/src/index.js#L113

I hope this answers your question, if not - feel free to comment back but I’m going to close this right now as I think it got answered.