jest-snapshots-svg v0.1.0
jest-snapshots-svg
Take a React Native component tree, and render it into an SVG.
// _tests/render.test.tsx
import * as React from "react"
import { Text } from "react-native"
import * as renderer from "react-test-renderer"
import "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
. If you just want to be able to specify the default
fontFamily to use, you can use setDefaultFont
.
import { addFontFallback, loadFont, setDefaultFont } from "jest-snapshots-svg"
setDefaultFont("DejaVu Sans")
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.
I want to work on this
OK, you need to clone this repo:
git clone https://github.com/jest-community/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
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago