Enzyme: Inline SVG doesn't seem to be supported in components

[diessica]

There's a SVG (icon.svg) in my React component (foo), which is imported inline using svg-inline-react (component) and svg-inline-loader (Webpack loader).

import InlineSVG from 'svg-inline-react'
import icon from '!svg-inline!./icon.svg'

const foo = () => {
  return (
    <div>
      <div className="bar" />
      <InlineSVG src={icon} />
    </div>
  )
}

But jsdom doesn't seem to support SVG elements, so Mocha throws the following error (I'm not sure if that's the reason).

<InlineSVG />: raw prop works only when window.DOMParser exists.
module.js:341
throw err;
^
Error: Cannot find module '!svg-inline!./icon.svg'

---

Mocha settings:

require('babel-register')();

const jsdom = require('jsdom').jsdom;

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

---

What can I do about that? Can I just ignore the <InlineSVG> component during my tests?

[aweary]

Are you using mount or shallow? If you're using mount does shallow work instead?

[diessica]

My test:

describe('<foo />', () => {
  it('contains bar', () => {
    expect(mount(<foo />)
      .contains(<div className="bar" />)).to.equal(true)
  })
})

Both shallow and mount returns the same error. It doesn't seem to be related with Enzyme.

[ljharb]

"Error: Cannot find module '!svg-inline!./icon.svg'" seems unrelated to enzyme - perhaps the webpack loader isn't functioning correctly in your tests?

[aweary]

Yeah this seems to be due to a combination of issues with 1) jsdom not supporting SVG and possibly 2) your webpack loader configuration for your tests.

I'm going to close this since it's not an actionable issue for enzyme.

[diessica]

I guess it's the first one, as I said in my issue description, because it seems to be specific to SVG. Other loaders (including inline ones) are working correctly. The only impossible-to-test React components were the ones with inline SVG. Others are completely fine to test!

I was wondering how people solved it. Is there a way to ignore this SVG stuff? It doesn't need to be tested.

Anyway, thank you both for your attention!

[aweary]

@diessica you might want to look into a way to mock SVG files for tests. I'm not personally sure how to do that with Mocha (we mainly use Jest and its pretty easy there) so you may want ask in the Mocha gitter channel or on StackOverflow

[diessica]

Yeah, that's the way to go!

Thank you! 😀

[diessica]

For anyone still struggling with this issue: This has nothing to do with Enzyme. Check your Webpack and Mocha configuration.

My solution

1. I've stopped using Webpack inline loaders (for some reason they don't get read by Mocha – I was getting the module not found message).
2. I've ignored all SVG files using a compiler in Mocha
   https://gist.github.com/diessica/76cdb131ddba6ef103d688ab7165c74e (use it with --compiler CLI option).

[diessica]

For people still struggling with this issue: solution above isn't enough, so I wrote an article about it:

:fire: How to Exclude CSS, Images, Anything from Unit Tests

It works for any JS testing framework (Mocha, ava, Jest, _whatever_).

Really hope it helps!