I'm working on a react-native-web app that uses Jest for snapshot testing. It works pretty well! The only real issue I'm having is that my className line diffs are borderline unreadable. Here's an example:
<div
- className="rn-WebkitFontSmoothing-1vzmqqg rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1qtguxu rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-1ee1ikv rn-fontSize-1enofrn rn-letterSpacing-196qbc9 rn-lineHeight-56xrmm rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-textShadow-14hblb1 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+ className="rn-WebkitFontSmoothing-1vzmqqg rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-1ee1ikv rn-fontSize-1enofrn rn-letterSpacing-196qbc9 rn-lineHeight-56xrmm rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-textShadow-14hblb1 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
There is a change in there, but it's pretty hard to spot. And whenever I make even minor styling changes, my tests fill up with dozens of diffs like these. This creates a lot of noise, and reduces the usefulness of my tests.
My question is, can this be improved? Could my snapshots write each className on a new line? Is it possible to do character diffs, like GitHub?