[Next.js] svgr/webpack과 vitest를 사용한 SVG 테스트 ( vitest 에서 svg 경로를 못 읽는 이슈 )

 

 

왜 이러는 지 한참을 삽질하다

 

이렇게 직접 tsx안에 적어주니 

 

통과를 합니다...????

 

이 때 깨달았습니다.

@svgr/webpack 사용하면 vitest 에서 svg 경로 오류가 생기는구나 하고....

 

아예 랜더링에서 막히고 있습니다...

 

랜더링을 못하니 아예 해당 Hear 컴포넌트 전체를 테스트 할 수가 없어졌는데요

모킹으로 넘겨서 테스트 랜터링을 넘겨야겠다고 판단했습니다.

 

 

1. vite-plugin-svgr 설치

npm install vite-plugin-svgr --save-dev

 

 

2. vitest.config.ts 에 vite-plugin-svg 추가

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import svgr from 'vite-plugin-svgr'; // 여기 추가

export default defineConfig({
  plugins: [tsconfigPaths(), react(), svgr()],// 여기 svgr() 추가

 

 

3. 다시 svgr로 컴포넌트 화 시킨 SVG 컴포넌트를 사용

 

4. mock svg 작성

 

// svgMock.tsx
const SvgMock = (props: React.SVGProps<SVGSVGElement>) => (
  <svg {...props}>
    <text x="0" y="15" fill="black">Mocked SVG</text>
  </svg>
);

export default SvgMock;

 

 

5. 테스트 코드에 SVG mock 적용

import { render, screen } from '@testing-library/react';
import Header from '../Header';
import { vi } from 'vitest';
import SvgMock from '../../__mocks__/svgMock'; // 절대 경로 사용

// SVG 모킹 적용
// 첫 인자에는 실제 svg가 있는 경로( 저는 public 폴더 )
vi.mock('/aboutMe.svg', 
  () => ({ default: () => <SvgMock /> }));


describe('Header', () => {
  it('renders the correct link text',  () => {
    render(<Header />);
    // screen.debug();
    const aboutMeLink =  screen.getByText('About Me');
    expect(aboutMeLink).toBeInTheDocument();
  });
});

 

 

 

jsdom이 랜더링 되면서 테스트 통과 😂