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

Created on 18 Jan 2018 · 12Comments · Source: facebook/jest

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

Source

mrchief

👍14

All 12 comments

Replacing the newlines in the svg:d attribute is probably the right behavior. I have it broken down to avoid lint warning.

However, I think this issue is happening because somewhere someone is doing a string replace on \r (instead of doing os specific newline). Just a guess based on OS specific behavior.

This started happening on Jan 15 (or that's when I noticed it as it failed our CI build).

mrchief on 18 Jan 2018

@pedrottimark

SimenB on 18 Jan 2018

Fixed?

TomerBrosh on 9 May 2018

👎1

No clue! 😃 Did you ask because you can't reproduce?

SimenB on 9 May 2018

😄1

I'm seeing a similar issue when there are line breaks in JSX className strings. The breaks are preserved in the windows snapshot, but are getting removed by Linux/OSX.

brianfegan on 9 Jul 2018

I'm seeing the same issue (on Jest 23.3), between Windows and Linux.

From what I can tell, this is isolated to line separators within a value e.g.

<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"
/>

The above example is preserved in the Snapshot on Windows, but is transformed to a single line in Linux.

Line separators between elements and attributes appear to be preserved consistently across Windows and Linux at least.

_I was curious as to whether it is valid JSX (as some editors, and even GitHub flag these lines with warnings/errors), but it appears to be part of the JSX spec according to Prettier._

ahumbledeveloper on 13 Jul 2018

Ressurecting this issue.
Having the same problem on our project.
minus is the Windows snapshots
plus is the macOS/linux version

Windows machines keep multiline separation whereas macOS and Linux(that includes the Bitbucker deployment environment) compile the SVG to a single line, giving us snapshot errors during deployment.

ivoiv on 8 Feb 2019

I am having the exact same issue as above with svg newlines where Windows retains the lines and Linux compiles to 1 line.
Versions:
Windows 10
XUbunutu 18.04.2
Node 10.15.3
React version used when jest testing: 16.7.0 (create-react-app)

StuwiiDev on 2 May 2019

Hi guys,
I have recently faced same issue. A bit of step-by-step debugging pointed to the details. I have noticed that line breaks are missing already after file loading (just check jest temp files to ensure).
Issue is not related to Jest itself, but is caused by Babel loader (being more precise – by babel-helper-builder-react-jsx) and different line ending on Windows and *nix.
https://github.com/babel/babel/blob/daf25af47c4161025dfa552fd41b837f062efe47/packages/babel-helper-builder-react-jsx/src/index.js#L91

Until fixed (will it ever be?) the only solutions seem to be

writing additional babel plugin for line endings normalization
avoiding multiline string literal attribute values
using LF line ending on all environments

uzer-ua on 9 Sep 2019

I found a temporary solution based on what @uzer-ua said, but its a pain. It helps to not change to LF line endings permanently.

Go into the file with the svg and change the line endings to LF. Run your snapshots. Go into the snapshot and change the line endings to CLRF. Undo your changes in the original file with the svg and push.

@pedrottimark any idea when a fix for this might be added?