render-react-to-svg

Take a React Native component tree, and render it into an SVG.

import * as React from "react"
import { Text } from "react-native"
import * as renderer from "react-test-renderer"
import {renderToSVGString} from "jest-snapshots-svg"

describe("Fixtures", () => {
  it("does some simple JSX", () => {
    const component = renderer.create(<Text />).toJSON()
    expect(component).toMatchSnapshot()
    expect(component).toMatchSVGSnapshot(480, 640)
  })
})

Would make:

src/_tests/
├── __snapshots__
│   ├── render.test.tsx.snap
│   └── render.test.tsx-does-some-simple-jsx.svg
└── render.test.tsx

It does this by emulating the rendering process of React Native by calling yoga-layout directly in your tests, then converting the output of the layout-pass into SVG items that can easy be previewed in GitHub.

👍

What does this look like in principal?

import * as React from "react"
import { View } from "react-native"
import * as renderer from "react-test-renderer"
import "jest-snapshots-svg"

const squareStyle = (color) =>
  ({ width: 50, height: 50, backgroundColor: color })

it("Renders three centered blocks", () => {
  const jsx =
    <View style={{
      flex: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
    }}>
      <View style={squareStyle("powderblue")}/>
      <View style={squareStyle("skyblue")}/>
      <View style={squareStyle("steelblue")}/>
    </View>

  const component = renderer.create(jsx).toJSON()
  expect(component).toMatchSVGSnapshot(320, 480)
})

<?xml version="1.0" encoding="UTF-8" ?>
  <svg width="320" height="480" ...>
  <rect type="View".../>
  <g transform='translate(0, 0)'>
    <rect type="View" .../>
    <rect type="View" .../>
    <rect type="View" .../>
  </g>
</svg>

Fonts

If you use <Text /> elements, you must have access to the font files so we can lay the text out. Usually, this just means having the font installed. However, if this goes wrong, this can be done manually via the loadFont function, where you pass in the font file as a buffer. If you need a fallback, you can use addFontFallback.

import { addFontFallback, loadFont } from "jest-snapshots-svg"

loadFont(fs.readFileSync("your-font-file.ttf"))
addFontFallback("Your Font", "'Helvetica', 'Arial', sans-serif")

This should be able to determine the fontFamily, fontWeight, and fontStyle. However, if it's wrong, or it failed, you can pass these in as a second argument.

loadFont(fs.readFileSync("your-font-file.ttf"), {
  fontFamily: "Helvetica",
  fontWeight: "normal",
  fontStyle: "normal"
})

If you have a .ttc file (a collection of multiple files), and it fails to correctly guess the font style parameters, you can provide a postscriptName in the style object to target a specific font. Do this in combination with passing in the font style arguments. See more about this over at fontkit.

Flaws

This is definitely pre-1.0, we only have it working on a few tests in artsy/emission. Expect alpha quality style snapshots for a while, but more people working on it will mean we all get a better chance at it working out well.

• Doesn't render image - see #18
• Not all flexbox attributes are supported - see #19

I want to work on this

OK, you need to clone this repo:

git clone https://github.com/orta/jest-snapshots-svg.git

There's the usual stuff, yarn test and yarn lint.

If you want to work against your own projects, then you need to set it up for linking and turn on watch mode.

yarn watch # starts a server, so make a new tab for the next bits
yarn link

cd [my_project]
yarn link jest-snapshot-svg

Now your project is using the dev version of this.

TODO:

• v0-0.5: make it work
• v0.5-1: make it good
• v1: figure out how/if it should end up in jest
• v2: use iTerm to show the images inline
• v3: get vscode-jest to preview them inline