Enzyme: Issues when using with require

[AnshulMalik]

Using const InlineSVG = require("svg-inline-react"); to render SVG

I am testing a component which renders:

return dom.div(
    {
      className: buttonClass ? `close-btn ${buttonClass}` : "close-btn",
      onClick: handleClick,
      title: tooltip
    },
    Svg()
  );

Svg() is another wrapper which renders

props = { src: require("./close.svg") }
return React.createElement(InlineSVG, props);

I use this code to test:

const wrapper = shallow(new CloseButton({ handleClick: onClick }));
console.log(wrapper.debug());

I am getting this error:
since the src is {} instead of being a string.

console.error ../node_modules/fbjs/lib/warning.js:36
    Warning: Failed prop type: Invalid prop `src` of type `object` supplied to `InlineSVG`, expected `string`.
        in InlineSVG

But require() works well when I normally run the application.

[ljharb]

You can't require svg by default. Whatever you use in your app to hack that in (webpack, I assume) needs to also run with your tests.

[AnshulMalik]

Yes @ljharb we use webpack for that, can you please guide me on how can I use webpack with this ?
Or gimme a link where I can find more detailed information.

[AnshulMalik]

Got it working. Thanks @ljharb
Not any issue with enzyme :)

[sinn1]

@AnshulMalik Can you post your solution please?

[CanvasCao]

Got it working. Thanks @ljharb
Not any issue with enzyme :)

I have the same problem with you.
Can you post your solution please?
Thanks.

[myf9000]

If you are using jest you can handle it by adding in jest.config.js file

moduleNameMapper: { 
  '\\.svg$': '<rootDir>/assets/mocks/svgMock.js', 
} 

svgMock.js contain module.exports = "";