CODEWITHSUNDEEP
reactjsjestjsenzyme
La pach'
La pach'

Reputation: 486

The tag <ReactComponent> is unrecognized in this browser

I'm going some test with jest, I'm currently testing component which using svg. I'm using ReactComponent to display my svg as react suggest us to do.

When I'm launching my test I always have this message :

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

So my code Look like this :

import React, { ReactElement, useState } from "react";
// SVG;
import { ReactComponent as Play } from "../../../../../../../../assets/svg/PLAY.svg";

export interface IComponentProps {
  valueX: valueX;
  color: string;
}

export default function Component({
  valueX,
  color,
}: IComponentProps): ReactElement {
  const [state, setState] = useState<boolean>(false);

  return (
     <div className="wrapper-lesson-video">
      <div className="display-colum">
        <div
          className="pickgradient"
          style={{
            background: `linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0%, ${color} 100% )`,
          }}
        >
          <img
            alt="title"
            src="https://cdn.xxxx.com/photo/xxxx.jpg"
          />
        </div>
        <div className="launcher-wrapper">
          <div className="launcher-menu">
            <h1 className="secondMinor uppercase">
              {valueX.last}.{valueX.current} {valueX.title}
            </h1>
            <p className="secondMinor m-t-20">{valueX.time}</p>
            <div
              className="major-button center-elements m-t-20"
              onClick={() => setState(!state)}
            >
              <div>Button</div>
              <div
                className="cursor-pointer svg-lesson"
                style={{ fill: "white" }}
              >
                <Play width="30px" height="30px" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

the following code is part of my test

  function initWrapper(initStore, props) {
    wrapper = mount(
      <Provider store={initStore}>
        <MemoryRouter>
          <Router>
            <Component {...minProps} />
          </Router>
        </MemoryRouter>
      </Provider>
    );
    return;
  }

  it("Run index is ran", async () => {
    initWrapper(storeFullyFill, minProps);
    expect(wrapper.find("Memo(component)").length).toBe(1);
    expect(wrapper).toBeTruthy();
  });

One of my svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="current" height="current" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>ICONS/PLAY</title>
    <defs>
        <polygon id="path-1-play" points="0 0 9.75 6.19051525 0 12"></polygon>
    </defs>
    <g id="ICONS/PLAY" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
        <g id="Rectangle-play" transform="translate(10.000000, 9.000000)">
            <mask id="mask-2-play" fill="current">
                <use xlink:href="#path-1-play"></use>
            </mask>
            <use id="play-mask-1" fill="current" fill-rule="nonzero" xlink:href="#play-1"></use>
            <rect fill="current" mask="url(#mask-2-play)" x="-10" y="-9" width="30" height="30"></rect>
        </g>
    </g>
</svg>

Do you thing this is temporary warning that'll be fix ? or can I do something to fix / mute it ?

Upvotes: 2

Views: 2991

Answers (2)

rottitime
rottitime

Reputation: 2461

You need to mock SVG files as jest struggles with SVG for some reason.

Create a __mock__ folder. The directory should be adjacent to node_modules. The setup should be:

svgrMock.js:

//__mocks__/svgrMock.js
import * as React from 'react'
export default 'SvgrURL'
export const ReactComponent = 'svg'

package.json

  ...
  "jest": {
    "moduleNameMapper": {
      "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
    }
  },

Just bear in mind only the following are valid methods for importing SVGs after this fix:

import logoURL from '../assets/logo.svg'
// and
import { ReactComponent as Logo } from '../assets/logo.svg'

Full details: https://react-svgr.com/docs/jest/

Upvotes: 2

Or Assayag
Or Assayag

Reputation: 6336

According to this:

For those finding this issue coming from other projects:

This can be fixed by adding xmlns="http://www.w3.org/2000/svg" to any offending SVG element, including <g>, <use>, <text>, or <tspan> (doesn't break spec, but does pollute attribute list).

You could also run tests in something other than __DEV__ mode, or add the is attribute (breaks HTML spec, requires test selectors to be rewritten).

https://github.com/facebook/react/blob/993ca533b42756811731f6b7791ae06a35ee6b4d/packages/react-dom/src/client/ReactDOMComponent.js#L442

Upvotes: 0

Related Questions