it + it dev vitest prisma Next.js(App Router)で作ったTODOアプリにVitestでテストを追加しました wono | discuss | tweet + it dev jest prisma Unit testing with Prisma ORM | Prisma DocumentationLearn how to setup and run unit tests with Prisma Client wono | discuss | tweet + it dev vitest Simple Unit Testing with Vitest: NextJS AppUnit testing considers only a unit in an isolated environment whereas there could be a block of code a.k.a function, or component. For better understanding, I will create a simple project to… wono | discuss | tweet + it dev vitest How to Mock Fetch API in VitestIn this article, we will learn how to mock the fetch API in Vitest in a to-do list service file. we will use the global along with vi.fn(). wono | discuss | tweet + it dev nextjs api Next.jsのAPIルートをテストする wono | discuss | tweet + it dev nextjs jest NextJs 14 — App Router and Unit Testing (w/ async pages)Unit-test in NextJs14 using JEST with practical examples. wono | discuss | tweet + it dev nextjs NextJS 14 app directory route.js testing fails with Vitest wono | discuss | tweet + it blog jest 단위 테스트로 복잡한 도메인의 프론트 프로젝트 정복하기(feat. Jest) wono | discuss | tweet + it dev nextjs mock How do I test routes made with the app router in NextJS? I'm using vitest for this wono | discuss | tweet + it dev nextjs vitest Next.js application testing with Vitest and testing libraryIn this article, we’ll continue testing Next.js application using Vitest and testing library, and delve into testing more complex components that interact with APIs, Redux selectors, and custom… wono | discuss | tweet + it dev nextjs vitest 프론트엔드에서 Nextjs와 Vitest를 사용해 손쉽게 테스팅하기 (그리고 개발 재밌게 하기)프론트엔드 진영에서 테스팅은 필수로 여겨지지 않는 경우가 제법 많습니다. 각기 다른 이유가 있겠지만 제 경험상 저는 ‘바빠서'가 주된 이유였던 것 같습니다. unit testing, integration testing, e2e testing 모두 100%의 커버리지로 테스팅을 진행해서 나쁜 점이야 없겠다만, 우리의 외부환경은 기다려 줄 수 없습니다. 특히… wono | discuss | tweet + it dev nextjs jest How to Unit Test Next.js API Routes with TypescriptNext.js is an awesome frontend framework. It’s powered by React under the hood so it plays well with everything React has to offer out of the box: Hooks, Context, hot browser reloading, Typescript… wono | discuss | tweet + it tool playwright E2E 테스트로 왜 Playwright 선택했는가?이 글은 'E2E 테스트 도구(tool)들 분류하기'에 이은 3번째 연재물입니다. 앞서 분류했던 Progressive automation과 Test runner 영역에서 각각의 도구를 선택했습니다. 이때 선택의 기준을 세우고 그 기준에 맞게끔 선택을 했는데요. 그 선택 과정을 정리해 본 글입니다. 목차 무엇을 선택했는가? 왜 선택했는가? 성능 다양한 브라우저 지원 병렬처리 멀티 Tab 지원 왜 Cucumber는 선택하지 않았나? 마무리 연재물 테스트도 종류가 있다.(링크) E2E 테스트 도구(tool)들 분류하기.(링크) E2E 테스트로 왜 Playwirght 선택했는가?(링크) Playwright, Auth 자동화와 API Mocking(링크) Playwright 빌드 자동화 구축(링크) VScode를.. wono | discuss | tweet + it tool test playwright API testing | PlaywrightIntroduction wono | discuss | tweet + it dev nextjs jest Mastering Jest: A Complete Guide to Testing Next.js Applications Part-1In the fast-paced world of web development, creating robust and bug-free applications is paramount.... Tagged with jest, testing, nextjs, react. wono | discuss | tweet + it dev nextjs jest Unit Test Next.js API Routes with TypeScript (longer-version)Testing API routes sucks, especially when using TypeScript. This article covers how to unit test Next.js API routes with TypeScript using Jest and React Testing Libraries. With the release of Next.js… wono | discuss | tweet + it dev jest Jest를 이용해서 테스트 코드를 작성해 보자!테스트 코드를 작성해야하는 이유...?작성한 코드가 의도한 대로 작동하는지 검증할 수 있다.코드 변경 시, 변경 부분으로 인한 영향도를 쉽게 파악할 수 있다.코드 리팩토링 시 기능 구현이 동일하게 되었다는 판단을 내릴 수 있다.코드 변경 시, 변경 부분으로 인한 영향도 wono | discuss | tweet + it dev jest Guide to writing integration tests in express js with Jest and SupertestWriting integration tests for new developers can prove a little tricky. During my first foray into... Tagged with javascript, express, node. wono | discuss | tweet + it blog nextjs Next.js app router에서 React Query 사용하면서 고민했던 것들지난 글에서 react-query의 hydrate, dehydrate을 통해 서버에서 prefetching 한 데이터 사용하는 방법에 대해서 살펴보았습니다. 서버에서 prefetching 한 데이터 사용하기 오늘은 조금 실용적으로 Next.js 13, 14 버전의 app router에서 react-query를 어떻게 사용하고 세팅하면 좋을지 고민했던 내용에 대해서 이야기해보도록 하겠습니다. 해당 글은 23년 10월에 메이저 버전 업데이트된, Next.js 14와 React-Query 5 를 기준으로 작성된 글입니다. 예시로 보여주는 코드는 저의 next-14-react-query repo에서 확인 할 수 있습니다. 제가 크게 고민했던 문제는 아래 세 가지입니다. Hydrate vs ReactQueryStreamedHydration 두 가지 API 중에 어떤 것을 채택할까? Hydration API 사용 시에 RSC, RCC 모두에서 깔끔한 코드를 유지하려면 queryOption은 … wono | discuss | tweet + it blog nextjs react next.js에서 react query가 필요할까?😋왜 필요할까?react-query가 제공해주는 SSR 환경에서 사용법을 보면서 한가지 의문이 들었습니다. react query가 제공해주는 캐싱, 리페칭 등등의 기능들이 매력적이긴한데...사실 대부분의 기능은 캐싱 , revalidate 같은 부분은next.js가 제공해주는 확장된 fetch 함수로도 충분하지 않나?? 그렇다면 next.js에서 react-query를 꽤나 복잡한 설정을 꾸역꾸역 설정하며 굳이굳이 사용할 필요성이 있을까?라는 의문이 들었습니다. 물론 아직 제공되지 않는 부분도 많을 것 같습니다.하지만 꼭 필요할까?라고 묻는다면 좀 애매할 것 같았습니다.그러던 중 You Might Not Need React Query라는 글을 발견했어요https://tkdodo.eu/blog/you-m.. wono | discuss | tweetNext
+ it dev jest prisma Unit testing with Prisma ORM | Prisma DocumentationLearn how to setup and run unit tests with Prisma Client wono | discuss | tweet
+ it dev vitest Simple Unit Testing with Vitest: NextJS AppUnit testing considers only a unit in an isolated environment whereas there could be a block of code a.k.a function, or component. For better understanding, I will create a simple project to… wono | discuss | tweet
+ it dev vitest How to Mock Fetch API in VitestIn this article, we will learn how to mock the fetch API in Vitest in a to-do list service file. we will use the global along with vi.fn(). wono | discuss | tweet
+ it dev nextjs jest NextJs 14 — App Router and Unit Testing (w/ async pages)Unit-test in NextJs14 using JEST with practical examples. wono | discuss | tweet
+ it dev nextjs mock How do I test routes made with the app router in NextJS? I'm using vitest for this wono | discuss | tweet
+ it dev nextjs vitest Next.js application testing with Vitest and testing libraryIn this article, we’ll continue testing Next.js application using Vitest and testing library, and delve into testing more complex components that interact with APIs, Redux selectors, and custom… wono | discuss | tweet
+ it dev nextjs vitest 프론트엔드에서 Nextjs와 Vitest를 사용해 손쉽게 테스팅하기 (그리고 개발 재밌게 하기)프론트엔드 진영에서 테스팅은 필수로 여겨지지 않는 경우가 제법 많습니다. 각기 다른 이유가 있겠지만 제 경험상 저는 ‘바빠서'가 주된 이유였던 것 같습니다. unit testing, integration testing, e2e testing 모두 100%의 커버리지로 테스팅을 진행해서 나쁜 점이야 없겠다만, 우리의 외부환경은 기다려 줄 수 없습니다. 특히… wono | discuss | tweet
+ it dev nextjs jest How to Unit Test Next.js API Routes with TypescriptNext.js is an awesome frontend framework. It’s powered by React under the hood so it plays well with everything React has to offer out of the box: Hooks, Context, hot browser reloading, Typescript… wono | discuss | tweet
+ it tool playwright E2E 테스트로 왜 Playwright 선택했는가?이 글은 'E2E 테스트 도구(tool)들 분류하기'에 이은 3번째 연재물입니다. 앞서 분류했던 Progressive automation과 Test runner 영역에서 각각의 도구를 선택했습니다. 이때 선택의 기준을 세우고 그 기준에 맞게끔 선택을 했는데요. 그 선택 과정을 정리해 본 글입니다. 목차 무엇을 선택했는가? 왜 선택했는가? 성능 다양한 브라우저 지원 병렬처리 멀티 Tab 지원 왜 Cucumber는 선택하지 않았나? 마무리 연재물 테스트도 종류가 있다.(링크) E2E 테스트 도구(tool)들 분류하기.(링크) E2E 테스트로 왜 Playwirght 선택했는가?(링크) Playwright, Auth 자동화와 API Mocking(링크) Playwright 빌드 자동화 구축(링크) VScode를.. wono | discuss | tweet
+ it dev nextjs jest Mastering Jest: A Complete Guide to Testing Next.js Applications Part-1In the fast-paced world of web development, creating robust and bug-free applications is paramount.... Tagged with jest, testing, nextjs, react. wono | discuss | tweet
+ it dev nextjs jest Unit Test Next.js API Routes with TypeScript (longer-version)Testing API routes sucks, especially when using TypeScript. This article covers how to unit test Next.js API routes with TypeScript using Jest and React Testing Libraries. With the release of Next.js… wono | discuss | tweet
+ it dev jest Jest를 이용해서 테스트 코드를 작성해 보자!테스트 코드를 작성해야하는 이유...?작성한 코드가 의도한 대로 작동하는지 검증할 수 있다.코드 변경 시, 변경 부분으로 인한 영향도를 쉽게 파악할 수 있다.코드 리팩토링 시 기능 구현이 동일하게 되었다는 판단을 내릴 수 있다.코드 변경 시, 변경 부분으로 인한 영향도 wono | discuss | tweet
+ it dev jest Guide to writing integration tests in express js with Jest and SupertestWriting integration tests for new developers can prove a little tricky. During my first foray into... Tagged with javascript, express, node. wono | discuss | tweet
+ it blog nextjs Next.js app router에서 React Query 사용하면서 고민했던 것들지난 글에서 react-query의 hydrate, dehydrate을 통해 서버에서 prefetching 한 데이터 사용하는 방법에 대해서 살펴보았습니다. 서버에서 prefetching 한 데이터 사용하기 오늘은 조금 실용적으로 Next.js 13, 14 버전의 app router에서 react-query를 어떻게 사용하고 세팅하면 좋을지 고민했던 내용에 대해서 이야기해보도록 하겠습니다. 해당 글은 23년 10월에 메이저 버전 업데이트된, Next.js 14와 React-Query 5 를 기준으로 작성된 글입니다. 예시로 보여주는 코드는 저의 next-14-react-query repo에서 확인 할 수 있습니다. 제가 크게 고민했던 문제는 아래 세 가지입니다. Hydrate vs ReactQueryStreamedHydration 두 가지 API 중에 어떤 것을 채택할까? Hydration API 사용 시에 RSC, RCC 모두에서 깔끔한 코드를 유지하려면 queryOption은 … wono | discuss | tweet
+ it blog nextjs react next.js에서 react query가 필요할까?😋왜 필요할까?react-query가 제공해주는 SSR 환경에서 사용법을 보면서 한가지 의문이 들었습니다. react query가 제공해주는 캐싱, 리페칭 등등의 기능들이 매력적이긴한데...사실 대부분의 기능은 캐싱 , revalidate 같은 부분은next.js가 제공해주는 확장된 fetch 함수로도 충분하지 않나?? 그렇다면 next.js에서 react-query를 꽤나 복잡한 설정을 꾸역꾸역 설정하며 굳이굳이 사용할 필요성이 있을까?라는 의문이 들었습니다. 물론 아직 제공되지 않는 부분도 많을 것 같습니다.하지만 꼭 필요할까?라고 묻는다면 좀 애매할 것 같았습니다.그러던 중 You Might Not Need React Query라는 글을 발견했어요https://tkdodo.eu/blog/you-m.. wono | discuss | tweet