An InvalidCharacterError when mounting a component using an svg
See original GitHub issueI 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:
- Created 5 years ago
- Comments:15 (7 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
OK, I managed to solve it using a babel plugin:
babel-plugin-inline-react-svgThanks for the help!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.