jest-snapshots-svg
Take a React Native component tree, and render it into an SVG.
// _tests/render.test.tsx describe"Fixtures",
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?
Your code | The final SVG |
---|---|
Write your normal Jest snapshot tests, but use
|
|
Then you run your tests. yarn jest . |
Then you get SVG output in the
|
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
.
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.
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