jest
[JEST,Recoil] jest에서 recoil사용하기
jest를 활용해서 컴포넌트 테스트를 할 때 recoil을 세팅하고 싶을 떄가 있다. 이럴때 initializeState 속성을 활용하면 해결할 수 있다. 아래 코드를 보자. Recoil을 사용하기 위해서 RecoilRoot를 씌워주고 initializeState 속성을 추가해줘서 시작할때 recoil값을 변경하는 것이 가능하다. import React from "react"; import { render, screen } from "@testing-library/react"; import { matchers } from "@emotion/jest"; expect.extend(matchers); import { RecoilRoot, useRecoilState } from "recoil"; import {..
[Jest & Router] Jest에서 Link태그 사용시 에러
jest를 활용해서 테스트 코드를 뜨던 중 해당 에러가 발생했다. TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...) 조금 찾아보니.. Link태그를 사용한 것이 문제가 되었다. Link 태그를 사용하려면 Router (v5라면 BrowserRouter) 로 감싸져 있어야 하는데 jest에서 감싸주지 않아서 생긴 문제였다. 따라서 가장 가벼운 라우터인 로 감싸주어서 해결했다. render( );
[React] 리액트에서 tdd 개발하기 (with emotion)
만약 CRA를 통해서 리액트 프로젝트를 만들었다면 손쉽게 Test코드를 작성하는 것이 가능하다. testing-libray/react 와 jest는 CRA를 통해 리액트 프로젝트를 만들었다면 이미 설치가 되어있을 것이고 emotion을 적용한 프로젝트에서 테스트 코드를 작성하기 위해서 @emotion/jest 라이브러리를 추가적으로 설치해준다. npm install --save-dev @emotion/jest 이후 테스트 코드를 만들때 아래 항목을 추가하면 된다 import { matchers } from "@emotion/jest"; expect.extend(matchers); @emotion/jest와 다른 테스팅 라이브러리를 비교할 때, @emotion/jest의 강점은 다음과 같다. 간편한 구성:..