vitest (7) 썸네일형 리스트형 [vitest] beforeEach와 beforeAll의 차이점 - 실수하기 쉬운 환경변수 테스트 예제 1. beforeAll 실행 시점: 해당 describe 블록 내의 모든 테스트가 실행되기 전에 딱 한 번만 실행용도모든 테스트에서 공통으로 사용할 리소스를 한 번만 설정할 때 데이터베이스 연결과 같이 비용이 많이 드는 설정변경되지 않는 상수나 설정값 초기화describe('Database Tests', () => { let connection; beforeAll(async () => { // DB 연결은 한 번만 수행 connection = await Database.connect(); }); it('test 1', () => { /* ... */ }); it('test 2', () => { /* ... */ });}); 2. beforeAll 실행 시점: 각각의 테스트 케이스가 실.. [vitest] 테스트 코드 작성 시 검증(Assertion) 전략 비교 - 엄격한 비교 vs 유연한 비교 1. 들어가며테스트 코드 작성 시 검증(Assertion)은 코드의 예상대로 작동하는지 확인하는 핵심 과정입니다. 효과적인 테스트는 꼼꼼한 검증에서 비롯되며, 다양한 상황에 맞춰 적절한 검증 방식을 선택하는 것이 중요합니다. 때로는 엄격한 비교가 필요하고, 때로는 유연한 비교가 더 적합할 수 있습니다. 이 글에서는 Vitest를 사용하여 테스트 코드를 작성할 때, 엄격한 비교와 유연한 비교라는 두 가지 주요 검증 전략을 비교 분석하고, 각각의 장단점과 사용 시점을 제시하여 상황에 맞는 최적의 검증 전략을 선택하는 방법에 대해 알아보겠습니다.2. 두 가지 검증 전략 비교2.1 엄격한 비교 (Strict Comparison)엄격한 비교는 예상 결과와 실제 결과가 정확히 일치하는지 확인하는 방법입니다. Vit.. [vitest] Framer Motion 컴포넌트 테스트 구현하기 - Vitest와 Proxy 패턴 활용 ( feat. react ) Framer motion ( 요즘은 motion 이란 이름으로 더 알려져 있는) 라이브러리를 사용해서 화면 애니메이션을 구현하다보니...테스트 시에 어찌해야할 지 감이 오지 않았습니다. 하지만 생각해보니 단위 테스트는 비즈니스 로직과 핵심 기능을 검증하는 것이 목적 이므로 할 필요가 없다는 결론에 도달했습니다😅😅😅 그렇지만 proxy 패턴을 써보았다는 거에 의의를 두고... 아래 내용은 남겨두도록 하겠습니다 다른 분께서 포스팅해놓은 글에서 힌트를 얻어 다행히 Framer motion 테스트를 할 수 있게 되었습니다😂https://dev.to/tmikeschu/mocking-framer-motion-v4-19go Mocking framer-motion v4Testing Library has ch.. [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.tsimport { defineConfig } from 'vitest/config'import react from .. "vite-tsconfig-paths" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps] 이 오류는 vite-tsconfig-paths 패키지가 ESM(ECMAScript Module) 형식으로 작성되어 있으며, CommonJS 형식의 require로 로드할 수 없다는 것을 나타냅니다. 해결방법 1. ESM(ECMAScript Module) 로 구성되어 있는지 확인import 문을 쓰고 있으므로 ✔ 2. Node.js 버전이 ESM을 지원하는지 Node.js 12 이상이므로 ✔ 3. package.json 파일에 "type": "module" 로 ESM 설정이 되어있는지여기서 빠져 있었다😡 앞으로 테스트 도구를 사용할 때는 기본 package.json 설정에 꼭 "type": "module", 을 추가해야겠다...😂vitest ui 보기 성공 ㅠ [Next.js] Next.js 프로젝트에 Vitest + React Testing Library 설정하기 (React 19, Next 15, TS) - 테스트 프레임워크 - vitest: 2.1.8 : Jest 호환 테스트 러너 - @vitejs/plugin-react: 4.3.4 : React 컴포넌트 테스트 지원 - vite-tsconfig-paths: 5.1.4 : TypeScript 경로 설정 지원- UI 및 커버리지 도구 - @vitest/ui: 2.1.8 : 테스트 실행 UI 인터페이스 - @vitest/coverage-istanbul: 2.1.8 : 코드 커버리지 측정 - istanbul: 0.4.5 : 상세 커버리지 리포트 생성- .. [Vitest] 1. 테스트란 무엇인가? 테스트란 무엇인가? 테스트는 광범위한 용어이며, 결국에는 일반적으로 무언가가 의도한 대로 작동하는지 확인하는 것을 의미합니다. 그리고 소프트웨어를 작성하거나 웹사이트를 구축할 때, 결국에는 소프트웨어를 작성하는 것이므로 일반적으로 소프트웨어나 구축 중인 웹사이트가 예상대로 작동하는지 테스트하고 싶습니다. 물론 이를 검증할 수 있습니다. 수동 테스트를 통해 소프트웨어나 웹사이트를 테스트할 수 있지만 수동 테스트에는 몇 가지 단점이 있으므로 수동 테스트 외에도 자동 테스트를 수행할 수 있습니다. 수동 테스트는 예를 들어 데모 웹사이트를 구축하는 동안 시스템에서 로컬로 방문한다는 의미입니다. 따라서 개발 서버를 가동하고 작업하는 동안 웹사이트를 테스트하고 사이트에서 작업하는 동안 다양한 기능을 테스트할 수 .. 이전 1 다음
