Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Reactions:16
Comments:16

Top GitHub Comments

6reactions

justinlazaro-iselectcommented, Aug 10, 2020

any solution about this issue?

4reactions

cnadolny2scommented, Apr 12, 2021

I solved it this way:

Disable CRLF conversion in Git:

git config --global core.autocrlf false
git config --global core.safecrlf false

WebStorm: Settings > Editor > Code Style: Line separator: Unix and macOS
Delete project from your local machine and checkout again from your git repository
Open newly checked out project in Webstorm and run your Snapshot tests