Rendering SVG Icons

[nweajoseph]

Is there any configuration that allows one to render an SVGR <svg/> element during a screenshot?

import { ReactScreenshotTest } from "react-screenshot-test";
import { ReactComponent as StarIcon } from './icons/star.svg';

ReactScreenshotTest.create("<Icon>")
  .viewport("Desktop", { width: 1024, height: 768 })
  .shoot("app", <StarIcon />) // <------------- renders nothing
  .run();

I considered mocking the ReactComponent imports using manual Jest mocks, but there's no way to do it that's specific to each icon, unless you create a moduleMapper entry for each individual icon that you want to be rendered in your screenshots.

[fwouts]

Hi @nweajoseph, just to clarify, in this example, would there be a corresponding SVG file named icons/star.svg?

[nweajoseph]

@fwouts exactly:

index.js
icons/
  star.svg

[fwouts]

Thank you!

I think it should be possible to support this with a custom transform, like we already do for CSS. You can read about it more at https://github.com/fwouts/react-screenshot-test/blob/master/docs/supporting-css.md :)

Would you like to give that a shot?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rambabusaravanan]

I have imported an svg file in my component

import CheckboxTick from './tick.svg';

const CheckboxInput = (props) => {
  return (
    <>
      <CheckboxTick viewBox="0 0 16 11" width={16} height={16} />
      <Something />
    </>
  )
};

with default jest configuration

    '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'react-screenshot-test/asset-transform'

but fails with below error

Error: Invalid tag: /assets/97cb9fa2-6bbd-4a12-90f4-4f35f7581c7f.svg ... : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error: ... Error: socket hang up

[fwouts]

Hey @rambabusaravanan, that's because the default Jest configuration simply exports a string with the file path. We need a custom transform for SVGR to work.

I'd invite you to try Viteshot instead, which is faster, simpler and supports SVGR out of the box :)