삽질Oㅔ는 끝2 없ㄷr...

Backstop 설치 Backstop 실행 스크립트 추가 "backstop:init": "backstop init --config=backstop.config.js", "backstop:test": "backstop test --config=backstop.config.js", "backstop:reference": "backstop reference --config=backstop.config.js", "backstop:approve": "backstop approve --config=backstop.config.js", "backstop:openReport": "backstop openReport --config=backstop.config.js" init backstop 초기 설정을 해 줌 (bac..

TDD 란 앞서 말한 것처럼 실패하는 테스트 코드부터 만드는 것이다. 그런 의미에서 아래 플로우를 웬만하면 지키고자 한다. 테스트 할 코드의 껍데기 생성 (페이지라든지, 컴포넌트라든지, 스토어라든지… 껍데기만 만들기) 테스트 파일 생성 테스트 파일에 껍데기에서 만들 기능을 주석으로 정리 주석을 지워가면서 실패하는 테스트를 작성 테스트가 성공하도록 껍데기를 채워나감 리팩토링 할 때도 위 플로우를 반복하여 코딩하는 것으로 가자 예를 들어 테마 설정, 홈으로 이동하는 Nuxt Link 만 있는 header 컴포넌트를 만들고자 할 때 1. 빈 껍데기 component 부터 만든다. 2. 같은 위치에 __tests__/header.test.ts 테스트 파일을 추가한다. 3. 만들 기능을 주석으로 정리한다. des..

ㅎㅎ 블로그에 개발 얘기를 적는 건 오랜만이라,,, 떨리네요 여러분의 따뜻한 한 마디가 또 한 명의 개발자를 살립니다 개요 Nuxt3 에 Jest 를 적용한 사례는 꽤나 적다. (그냥 Nuxt3 자체가 적을지도) 다른 사람들이 먼저 해 주기를 기다리다가, 더 이상은 현기증이 날 것 같아서 찍먹을 해 보기로 하였다. 들어가기 전 스펙은 대략 이렇습니다. Nuxt3 Typescript Pinia Jest Vue test utils 아래에서 해당 내용 프로젝트 구성을 볼 수 있습니다. https://github.com/zestlee1106/nuxt3-starter GitHub - zestlee1106/nuxt3-starter: Nuxt3 + Typescript + Jest 맛보기 프로젝트 Nuxt3 + Typ..

유닛테스트 (단위테스트)가 몬가요 이름 그대로 작은 단위로 나눠 테스트 하는 것이다 테스트에 네트워크나 DB 접근이 들어가면 안 된다 보통 axios 관련 테스트를 할 땐 데이터 mocking 을 한다 e2e 와 다른 장점이 몬가요 빈번히 일어나는 수정의 버그를 막는데 효과적이다 들어가는 비용이 저렴하다 (네트워크 통신을 안 하기 때문) 그럼 유닛테스트가 e2e보다 무조건 좋을까? 더보기 그건 당연히 아님 어떤 목적으로 테스트 하느냐에 따라 방법이 달라지는 것이다 e2e 는 사용자의 입장에서 테스트를 하는 것으로, 실제 브라우저를 띄워 네트워크 통신까지 한다 따라서 실제 상황에서 발생할 수 있는 에러를 잡을 수 있다 크로스 브라우징, 렌더링, 네트워크, 내비게이션 관련 테스트가 필요할 경우에는 e2e 테..

TDD 테스트 주도 개발이다 테스트 주도 개발이라 함은… 이름 그대로 테스트가 주도하는 개발이다 (…?) 함수 단위의 테스트를 권장한다 테스트 코드를 먼저 짜고, 테스트가 정상적으로 돌아갈 때까지 테스트를 하면서 코드를 작성한다 장점이 무엇일까 모듈의 역할이 단순하고, 명확해진다 만들어야 하는 기능을 좀 더 명확하게 만들 수 있다 실제 상황에서 발생할 에러를 발견할 수 있다 BDD 행동 주도 개발이다 TDD 에서 파생된 프로세스이다 (동작 작성으로 시작한다) 시나리오 기반의 테스트 케이스를 작성한다 (비개발자가 이해할 수 있을 정도로 테스트 케이스를 작성한다) Given When Then 을 기본 패턴으로 권장한다 비즈니스 요구사항에 집중하여 개발한다 최종 사용자를 위한 동작에 중점을 둔다 장점이 무엇일..