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.