Jest: Optionally ignore whitespaces in snapshot tests (more flexible snapshots)

[alesanchezr]

💬 Questions and Help

I teach React.js to hundreds of students, all exercises are auto-graded using Jest as testing engine.
The problem is that Jest snapshots are to sensitive about spaces. If the student solution is:

<span>    Hello World</span>

Instead of

<span>Hello World</span>

Jest will raise an error.

Is it possible to tell jet to be more flexible? Students constantly get stuck because they have to keep trying to match the exact solution character by character. Or maybe use the --config to tell jest to prettify the student code before testing it?

Please note that this issue tracker is not a help form and this issue will be closed.

For questions or help please see:

• The Jest help page
• Our discord channel in Reactiflux
• The jestjs tag on StackOverflow

[rogeliog]

I wonder if you could write a snapshot serializer that would trim the whitespaces of whenever there is a React element with text as is children.

[alesanchezr]

I was able to fix this by making the source code prettier before taking the snapshot using prettify. Now snapshots are more consistently similar.

Thank you for your idea @rogeliog, I did not know that was possible but it looks like another viable solution.

Here is the open source project if anyone wants to contribute: https://github.com/4GeeksAcademy/react-exercises

[eric-burel]

Hi @rogeliog , any idea where to start? I could write such a serializer but doc is sparse, I haven't figured how they work. I should do a replace in the print method somehow but then no idea.
We have the same issue when testing GraphQL code.

Maybe there is a default serializer I could take inspiration from for React?

[rogeliog]

Jest snapshots serializers use the pretty-format package, which also lives inside the Jest repository

Here are some links that might be useful.

• Pretty format documentation
• Using Pretty format with Jest, this shows how to write a serializer, which pretty-format calls _a plugin_.
• Pretty Format out of the box plugins

Let me know if that doesn't help and I'm happy to provide more specific details

[eric-burel]

That's of great help already, thanks!