title: The tag <ReactComponent> is unrecognized in this browser
body: <p>I'm going some test with jest, I'm currently testing component which using svg. I'm using <code>ReactComponent</code> to display my svg as react suggest us to do.</p>
  <p>When I'm launching my test I always have this message :</p>
  <blockquote>
  <p>Warning: The tag  is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.  at ReactComponent</p>
  </blockquote>
  <p>So my code Look like this :</p>
  <pre><code>import React, { ReactElement, useState } from &quot;react&quot;;
  // SVG;
  import { ReactComponent as Play } from &quot;../../../../../../../../assets/svg/PLAY.svg&quot;;
  
  export interface IComponentProps {
    valueX: valueX;
    color: string;
  }
  
  export default function Component({
    valueX,
    color,
  }: IComponentProps): ReactElement {
    const [state, setState] = useState&lt;boolean&gt;(false);
  
    return (
       &lt;div className=&quot;wrapper-lesson-video&quot;&gt;
        &lt;div className=&quot;display-colum&quot;&gt;
          &lt;div
            className=&quot;pickgradient&quot;
            style={{
              background: `linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0%, ${color} 100% )`,
            }}
          &gt;
            &lt;img
              alt=&quot;title&quot;
              src=&quot;https://cdn.xxxx.com/photo/xxxx.jpg&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;launcher-wrapper&quot;&gt;
            &lt;div className=&quot;launcher-menu&quot;&gt;
              &lt;h1 className=&quot;secondMinor uppercase&quot;&gt;
                {valueX.last}.{valueX.current} {valueX.title}
              &lt;/h1&gt;
              &lt;p className=&quot;secondMinor m-t-20&quot;&gt;{valueX.time}&lt;/p&gt;
              &lt;div
                className=&quot;major-button center-elements m-t-20&quot;
                onClick={() =&gt; setState(!state)}
              &gt;
                &lt;div&gt;Button&lt;/div&gt;
                &lt;div
                  className=&quot;cursor-pointer svg-lesson&quot;
                  style={{ fill: &quot;white&quot; }}
                &gt;
                  &lt;Play width=&quot;30px&quot; height=&quot;30px&quot; /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>the following code is part of my test</p>
  <pre><code>  function initWrapper(initStore, props) {
      wrapper = mount(
        &lt;Provider store={initStore}&gt;
          &lt;MemoryRouter&gt;
            &lt;Router&gt;
              &lt;Component {...minProps} /&gt;
            &lt;/Router&gt;
          &lt;/MemoryRouter&gt;
        &lt;/Provider&gt;
      );
      return;
    }
  
    it(&quot;Run index is ran&quot;, async () =&gt; {
      initWrapper(storeFullyFill, minProps);
      expect(wrapper.find(&quot;Memo(component)&quot;).length).toBe(1);
      expect(wrapper).toBeTruthy();
    });
  </code></pre>
  <p>One of my svg:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;svg width=&quot;current&quot; height=&quot;current&quot; viewBox=&quot;0 0 30 30&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
      &lt;title&gt;ICONS/PLAY&lt;/title&gt;
      &lt;defs&gt;
          &lt;polygon id=&quot;path-1-play&quot; points=&quot;0 0 9.75 6.19051525 0 12&quot;&gt;&lt;/polygon&gt;
      &lt;/defs&gt;
      &lt;g id=&quot;ICONS/PLAY&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;current&quot; fill-rule=&quot;evenodd&quot;&gt;
          &lt;g id=&quot;Rectangle-play&quot; transform=&quot;translate(10.000000, 9.000000)&quot;&gt;
              &lt;mask id=&quot;mask-2-play&quot; fill=&quot;current&quot;&gt;
                  &lt;use xlink:href=&quot;#path-1-play&quot;&gt;&lt;/use&gt;
              &lt;/mask&gt;
              &lt;use id=&quot;play-mask-1&quot; fill=&quot;current&quot; fill-rule=&quot;nonzero&quot; xlink:href=&quot;#play-1&quot;&gt;&lt;/use&gt;
              &lt;rect fill=&quot;current&quot; mask=&quot;url(#mask-2-play)&quot; x=&quot;-10&quot; y=&quot;-9&quot; width=&quot;30&quot; height=&quot;30&quot;&gt;&lt;/rect&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Do you thing this is temporary warning that'll be fix ? or can I do something to fix / mute it ?</p>