테스트 (4) 썸네일형 리스트형 [Jest] The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. 오류 해결하기 평화롭게 테스트 코드를 짜고 있던 중 다음과 같은 에러를 만났다. 토스트 UI를 호출하는 useToast hook을 검사하려 하는데 오류가 난 것이었다. 테스트 코드 자체는 이상이 없었는데 에러가 발생해서 바로 구글링을 시작하려 하는데.. The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. 스코프 바깥에 선언이 되었다고 ..? 게다가 오류 형태도 참조에러기 때문에 무언가 있다고 생각해서 jest 공식 홈페이지를 뒤지기 시작했고 곧 정답을 찾을 수 있었다! Since calls to jest.mock() are hoisted to the top of the file, Jest prevents a.. MSW의 delay infinite는 테스트 성능에 이상이 없을까? 리액트 테스팅 라이브러리와 MSW를 이용하여 다음과 같은 hook을 테스팅 하고 다음과 같은 리뷰를 받았다. import { useQuery, useSuspenseQuery } from '@apollo/client'; import { MeQuery } from '@generated/graphql'; import { useErrorBoundary } from 'react-error-boundary'; type MeQueryProps = { id: string; }; export type useMeQueryReturnValue = { isLoading: boolean; isError: boolean; Name: string | null; }; const useMeQuery = ({ id, }: Present.. [vitest] Failed to resolve import "path" from 'component'. Does the file exist? 에러 해결하기 Next.js 14버전과 vitest를 사용하여 테스트 환경을 구성하던 중 다음과 같은 오류를 만났다. Failed to resolve import "@/utils/test/render" from "src/app/components/GNB.spec.tsx". Does the file exist? 환경 구성도 잘 되어져 있고, 문제가 없었는데 파일 참조를 못하는 오류가 발견된 것이다.. 프로젝트에서 절대 경로를 사용하도록 다음과 같이 설정했었는데 해당 부분에서 문제가 생긴듯 하다. //tsconfig.json compilerOptions: { ... "paths": { "@/*": ["./src/app/*"] } } vitest 내부에서도 절대경로를 수정해줘야 할 것 같아서 구글 검색과 공식문서를 통해서 .. 좋은 테스트 코드 작성법 정리 애플리케이션의 품질과 안정성을 높이기 위해 사전에 결함을 찾아내고 수정하기 위한 행위 테스트는 주로 특정 모듈(컴포넌트)이 사양에 잘 동작하는지 검증 테스트 코드의 효과 좋은 설계에 대한 사고를 도와준다. 테스트 코드를 작성할 때 테스트 코드를 독립적으로 작성할 수 있도록 결합도를 낮추도록 설계하여 작성 가능 의미 있는 컴포넌트 단위로 분리가 가능하도록 설계 테스트 코드를 기반으로 빠르고 안정적이게 리팩토링 할 수 있다. 리팩토링: 결과의 변경 없이 코드의 구조를 수정 좁은 범위를 개선 하고 테스트를 한다면 문제를 발견하기가 훨씬 쉽다. 애플리케이션 기능의 이해를 돕는 문서가 된다. 올바른 테스트 작성을 위한 규칙 인터페이스를 기준으로 테스트를 작성해야 한다. 내부 구현에 대한 테스트는 캡슐화를 위반하여.. 이전 1 다음
