Enzyme: Enzyme fails when importing svg

Created on 12 Oct 2017 · 3Comments · Source: enzymejs/enzyme

Greetings all,

I have a funny problem when trying to run tests for the component which imports a svg. Babel is trying to import it as a javascript and faces a horrible death.

Webpack building for this works fine as well as test for the components which are not importing any svgs. Could you have any workarounds how to get this working? Or is this a correct forum for this issue?

On below you see the test-related files and at the bottom there's an error message.

Any help would be appreciated.

Breaking.jsx

import React from 'react';
import mockLogo from 'question.svg';
import styled from 'styled-components';

let Logo = styled.img`
    width: 2rem;
    height: auto;
    margin-right: 1rem;
`;
Logo.src=mockLogo;

export default class Demo extends React.Component {
    constructor(props) {
        super(props);
        console.log(mockLogo); // /static/media/question.5d03be5f.svg
    }

    render() {
        return <span><Logo /></span>;
    }
}

test-breaking.js

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Breaking from './Breaking.jsx';

describe('<Breaking />', () => {
    it('registers clicks', () => {
        const wrapper = shallow(<Breaking />);
        expect(wrapper.text()).to.contain("I'm a AppBar");
    });
});

question.svg

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
</svg>

test_setup.js

require('babel-register')({
    babelrc: true,
    cache: true,
});

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;


function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .map(prop => Object.getOwnPropertyDescriptor(src, prop));
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

.babelrc

{
    "presets": ["stage-3", "es2015", "react"],
    "plugins": ["transform-strict-mode", "transform-class-properties"]
}

package.json

{
    "devDependencies": {
        "prop-types": "^15.5.10",
        "jsdom": "^11.3.0",
        "jsdom-global": "3.0.2",
        "react": "^15.5.4",
        "react-addons-test-utils": "^15.0.2",
        "react-dom": "^15.0.2",
        "mocha": "3.5.0",
        "enzyme": "^2.9.1",
        "babel-cli": "^6.24.1",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-strict-mode": "^6.8.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-flow": "^6.23.0",
        "babel-preset-react": "^6.11.1",
        "babel-preset-stage-3": "^6.24.1",
        "babel-register": "6.26.0",
        "styled-components": "^2.1.2"
    }
}

error

$ mocha --require ./test_setup.js ./test-breaking.js
/private/var/dev/node_modules/babel-core/lib/transformation/file/index.js:590
      throw err;
      ^

SyntaxError: /private/var/dev/molecules/app-bar/assets/question.svg: Unexpected token (1:1)
> 1 | <?xml version="1.0" encoding="iso-8859-1"?>
    |  ^

Source