An InvalidCharacterError when mounting a component using an svg

See original GitHub issue

I have a component which uses the following svg file:

delete.svg

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32">
    <path fill="#95A6B8" fill-rule="evenodd" ... />
</svg>

MyComponent.js

import DeleteIcon from "./delete.svg";
import style from "./MyComponent.scss";

class MyComponent extends Component {
  removeItemFromList(item, event) {
      //...
  }

  render() {
      return <div>
              <DeleteIcon
                className={style.removeButton}
                onClick={this.removeItemFromList.bind(this, item)}
              />
      <div>
}
export default MyComponent;

MyComponent.test.js

  describe("editable", function() {
    let componentWrapper;

    beforeEach(() => {
      componentWrapper = mount(
        <MyComponent
          data={[]}
        />
      );
    });

    afterEach(() => {
      componentWrapper.unmount();
    });

    it("testing something...", () => {
      expect(componentWrapper.exists(".someClass")).toEqual(true);
    });

  })

Current behavior

When mounting, I get the following InvalidCharacterError error:

InvalidCharacterError: "" did not match the Name production: Unexpected syntax in top
Line 1:

^^^
    at exports.name (/node_modules/jsdom/lib/jsdom/living/helpers/validate-names.js:11:11)
    at DocumentImpl.createElement (/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:688:5)
    at Document.createElement (/node_modules/jsdom/lib/jsdom/living/generated/Document.js:134:45)
    at createElement (/node_modules/react-dom/cjs/react-dom.development.js:7630:34)
    at createInstance (/node_modules/react-dom/cjs/react-dom.development.js:8714:20)  

Expected behavior

Mounting is successful. Using shallow this error isn’t thrown.

Your environment

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.8.0
react 16.7.0
jest 23.6.0

Adapter

  • enzyme-adapter-react-16
  • enzyme-adapter-react-16.3
  • enzyme-adapter-react-16.2
  • enzyme-adapter-react-16.1
  • enzyme-adapter-react-15
  • enzyme-adapter-react-15.4
  • enzyme-adapter-react-14
  • enzyme-adapter-react-13
  • enzyme-adapter-react-helper
  • others ( )

I’ve seen issue #1510 but it’s really the same error…

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
hagaylcommented, Feb 6, 2019

OK, I managed to solve it using a babel plugin:babel-plugin-inline-react-svg Thanks for the help!

1reaction
ljharbcommented, Jan 29, 2019

Note that importing scss, css, etc - basically anything that’s not .js, .node, or .json - needs to have babel transforms NOT webpack config, to be able to have it work in tests (any tests, not just enzyme).

In general, very little should be in your webpack config, and it should all be done with babel transforms instead.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Receiving "InvalidCharacterError: String contains an invalid ...
I went into my html and copied the svg code, and put these svg components into svg files. They open as images in...
Read more >
Site deploys on Netlify, fails in localhost, InvalidCharacterError
Cloned the repository to a brand new pc, ran npm i to install all the ... One svg (the logo) is imported into...
Read more >
gatsby-plugin-react-svg
InvalidCharacterError : Failed to execute 'createElement' on 'Document': The tag name provided ('data:image/svg+xml; ... It's likely that you use SVG in your ...
Read more >
react-svg - npm
A React component that injects SVG into the DOM. ... Start using react-svg in your project by running `npm i ... npm install...
Read more >
Jest - SVGR
Transforms SVG into React Components. ... Configure Jest to work properly with SVGR. 1. Create a mock file. Create a mock file __mocks__/svg.js...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found