jest: Different snapshots for SVG on Windows vs. Linux/OSX machines (doesn't preserve newline on *nix)

Do you want to request a feature or report a bug?

bug

What is the current behavior?

react-test-renderer produces different output on linux vs windows machines. On windows, it preserves newlines. On linux/OSX, it removes them.

---

component

/** @flow */

import React from 'react'

type Props = {
  componentStack: string,
  error: Error,
};

const style = {
  height: '100%',
  maxHeight: '100vh',
  width: '100%',
  maxWidth: '100vw',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  textAlign: 'center',
  backgroundColor: '#C00',
  color: '#FFF',
  boxSizing: 'border-box',
  cursor: 'help'
}

const svgStyle = {
  fill: 'currentColor',
  flex: '1 1 10em'
}

const toTitle = (error: Error, componentStack: string): string => `${error.toString()}\n\nThis is located at:${componentStack}`

const ErrorBoundaryFallbackComponent = ({ componentStack, error }: Props) => (
  <div style={style} title={toTitle(error, componentStack)}>
    <svg style={svgStyle} viewBox="0 0 24 24" preserveAspectRatio="xMidYMid">
      <path
        d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,
        12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,
        12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,
        9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,
        8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,
        15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,
        17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z"
      />
    </svg>
  </div>
)

export default ErrorBoundaryFallbackComponent

test

import React from 'react'
import renderer from 'react-test-renderer'

import Fallback from '../fallback'

describe('<Fallback />', () => {
  test('renders error correctly', () => {
    const props = { componentStack: 'dummy stack that goes on forever', error: 'crash, burn, die' }
    const tree = renderer.create(<Fallback {...props} />).toJSON()

    expect(tree).toMatchSnapshot()
  })
})

windows output

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Fallback /> renders error correctly 1`] = `
<div
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#C00",
      "boxSizing": "border-box",
      "color": "#FFF",
      "cursor": "help",
      "display": "flex",
      "flexDirection": "column",
      "height": "100%",
      "maxHeight": "100vh",
      "maxWidth": "100vw",
      "textAlign": "center",
      "width": "100%",
    }
  }
  title="crash, burn, die

This is located at:dummy stack that goes on forever"
>
  <svg
    preserveAspectRatio="xMidYMid"
    style={
      Object {
        "fill": "currentColor",
        "flex": "1 1 10em",
      }
    }
    viewBox="0 0 24 24"
  >
    <path
      d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,
 12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,
 12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,
 9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,
 8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,
 15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,
 17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z"
    />
  </svg>
</div>
`;

linux output

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Fallback /> renders error correctly 1`] = `
<div
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#C00",
      "boxSizing": "border-box",
      "color": "#FFF",
      "cursor": "help",
      "display": "flex",
      "flexDirection": "column",
      "height": "100%",
      "maxHeight": "100vh",
      "maxWidth": "100vw",
      "textAlign": "center",
      "width": "100%",
    }
  }
  title="crash, burn, die

This is located at:dummy stack that goes on forever"
>
  <svg
    preserveAspectRatio="xMidYMid"
    style={
      Object {
        "fill": "currentColor",
        "flex": "1 1 10em",
      }
    }
    viewBox="0 0 24 24"
  >
    <path
      d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20, 12M22,12A10,10 0 0,112,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22, 12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.316.3,11 15.5,11C14.7,11 14,10.3 14, 9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,118.5,11C7.7,11 7,10.3 7,9.5C7, 8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23, 17.23L7.81,15.81C8.71,14.7210.25,14 12,14Z"
    />
  </svg>
</div>
`;

What is the expected behavior?

The snapshot generated should be same on both Windows and Linux/OSX.

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.

Node: 8.9.4 yarn: 1.1.0 jest: 21.2.1 react-test-renderer: 16.2.0 react: 16.0.0