How to resolve SVG rendering error when testing component with jest and RTL?

Viewed 24

I'm trying to run component tests with jest and RTL. However, an error occurred when loading SVG as a component inside the component. How can I render the component without errors??

The error I got is:

  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
  
  Check the render method of `SearchHeader`.
      at name (C:\Users\components\common\SearchHeader.tsx:20:11)  

  23 |   return (
  24 |     <Header>
> 25 |       <SvgPosition onClick={() => router.back()}>{hasBack ? <Prev width="20" height="16" /> : null}</SvgPosition>
     |                                                             ^
  26 |       <Span hasBack={hasBack} hasSearch={hasSearch}>
  27 |         {name}
  28 |       </Span>

My SearchHeader component looks like this:

import styled from "@emotion/styled";
import Prev from "public/icon/prevArrow.svg";
import Search from "public/icon/search.svg";
import { Common, Pretendard, SpaceBetween } from "styles/common";
import { useRouter } from "next/router";

const SearchHeader = (props: Props) => {
  const { name, hasBack, hasSearch } = props;
  const router = useRouter();

  return (
    <Header>
      <SvgPosition onClick={() => router.back()}>{hasBack ? <Prev width="20" height="16" /> : null}</SvgPosition>
      <Span hasBack={hasBack} hasSearch={hasSearch}>
        {name}
      </Span>
      <SvgPosition>{hasSearch ? <Search /> : null}</SvgPosition>
    </Header>
  );
};

It seems to be an error while rendering the SVG, but I don't know how to fix it.

1 Answers
Related