typescript 기반 react 프로젝트에 jest 적용 오류해결, recoil, router Custom Render로 해결

test오류

typescript를 사용하는 react 프로젝트에서 test를 실행시켰을 때 아래와 같은 오류가 발생했다.

SyntaxError: /Login.tsx: Unexpected token, expected "," (10:20)

타입 선언한 부분에서 오류가 발생했다.

 

오류해결

root > .babelrc

바벨 파일에 "@babel/preset-typescript" 추가해주기

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                [
                    "@babel/preset-react",
                    {
                        "runtime": "automatic"
                    }
                ],
                "@babel/preset-typescript"
            ],
            "plugins": ["@babel/plugin-transform-runtime"]
        }
    }
}

recoil, router Test 오류

그리고 프로젝트에서 recoil과 react router를 사용해주었는데 이와 관련해서도 test 오류가 발생했다.

 [Error: useRoutes() may be used only in the context of a <Router> component.]

 

이 에러는 현재 실제 코드는 <RecoilRoot>와 <BrowserRouter>로 감싸주었지만, 테스트 부분에는 감싸주지 않기 때문에 recoil과 router를 사용할 때 에러가 나고 있습니다.

오류해결

아래와 같이 오류 해결할 수 있다.

import { render, screen } from '@testing-library/react'
import App from './App'
import {BrowserRouter} from 'react-router-dom'
import {RecoilRoot} from "recoil";

describe('App', () => {
  it('renders App', () => {
    render(<RecoilRoot><BrowserRouter><App/></BrowserRouter></RecoilRoot>)
    expect(screen.getByText('')).toBeInTheDocument()
  })
})

하지만 다른 데스트들도 recoil과 router가 필요하기 때문에 모든 test 파일에 매번 render에 <RecoilRoot><BrowserRouter><Component/></BrowserRouter></RecoilRoot> 감싸주는 것은 번거롭고 코드의 중복이 많아진다.

Custom Render

Custom Render 를 만들어서 해결하자

test-util.tsx 파일을 생성하고

import {ReactElement} from "react";
import {render as reactRender} from "@testing-library/react";
import {RecoilRoot} from "recoil";
import {BrowserRouter} from "react-router-dom";

const render = (ui: ReactElement, {...options} = {}) =>
    reactRender(ui, {
        wrapper: ({children}) => (
            <RecoilRoot>
                <BrowserRouter>{children}</BrowserRouter>
            </RecoilRoot>
        ),
        ...options,
    });

export * from "@testing-library/react";
// render 메소드 이외에도 testingLibrary에서 제공해주는 모든 것을 다시 export 해주기

export {render};
// 원래 tlr에서 제공하는 render 메소드를 customRender로 override 해주기

기존에 testing-library/react에서 import 해주었던 것을 test-utils에서 import 해주어 사용하면 된다.