I had to use JEST_PUPPE_SHOTS_RENDERER instead of JEST_PUPPE_RENDERER
as specified in readme

"globals": {
    "__JEST_PUPPE_SHOTS_RENDERER__": "STYLED_COMPONENTS"
}

Hello
We have a problem with testing react components, when its size has been changed, in such case jest-image-snapshots throws error "toMatchImageSnapshot(): Received image size must match baseline snapshot size in order to make comparison."
In general that's not a problem when creating screenshot of whole page, but jest-puppe-shots makes screenshot of small part of it and it can differ in size in such case as adding new line to component.
I thought about always creating big screenshot (something like 1000x1000px) but comparision of such big screenshots takes too long.
I tried to come up with another solution, unfortunately I couldn't find any, so I could use any help with this issue. :)

Hi,

I try to use it with create-react-app, however it doesn't allow altering jest preset without ejecting.

Is it possible to setup jest-puppe-shots in setupJest.js file?

This example is not a valid use of path.resolve() and following this format will throw an error.

 await page.mountCssContext(path.resolve('../path/to/my-assets-dir', [
    'css/reset.css',
    'css/custom-styles.css'
  ]))

I've tried altering it to this, but

 await page.mountCssContext(path.resolve('build'), [
    'style.css'
  ])

But I am consistently getting the error Error: loading style from build/style.css. Can you provide an updated additional css example that is working correctly?

When running test that is using STYLED_COMPONENTS as a renderer there is a problem with React context:

Failed context type: Invalid context `__styled-components-stylesheet__` supplied to `Component`.

Hello
There is a problem when rendered output has new lines. Most of the time that's not a problem, but svg elements can have new lines in path elements.
In my case that was:

<svg>
<path d={`M150 0 
L75 200 
L225 200 Z`} />
</svg>

The problem is in this fragment (lib/renderer/common.js , line 1):

const wrapReactHtmlOutput = html => `document.body.innerHTML = '${html.replace("'", "\\'")}'`;

all you have to do is to change it so it uses template literals:

const wrapReactHtmlOutput = html => `document.body.innerHTML = \`${html.replace("'", "\\'")}\``;

also now I'm not sure if this replace is even needed, as variable html isn't surrounded by it anymore.