#vitest

프론트엔드인데 AWS, CICD에 대해 몰라요.

3년 차인데 물 경력인 것인 지, 요즘 다들 스펙보면 화려해보이던데 제가 할 줄 아는거라곤, JavaScript(TypeScript), HTML5, CSS3, React정도입니다.. 적고나니 엄청 물경력같네요; 요즘 Next가 핫하기에 Next.js까진 공부하려고 하는데 Vitest도 공부해야할 것 같고.. CICD 파이프라인도 공부해야하는 건 지, AWS도 요즘 스펙에 자주 언급되는 것 같고.. 막막하네여 스펙을 무엇부터 채워야할까요..?

프론트엔드 테스트코드 어떻게 하세요?

안녕하세요. 2년차 프론트엔드로 일하고 있는 주니어입니다. 사내에 테스트코드 도입 전 혼자 해보고있는데요, tdd를 하고 계시는 다른 현직자 분들에게 궁금한점이 있습니다. 유닛 테스트 : jest, vitest E2E 테스트: cypress, playwright 위의 도구로 이것저것 해보고있는데 하면서 까다로운 점이 있습니다. 일반 유틸 함수 같은 것은 유닛테스트가 비교적 간단하지만 프론트 엔드이다 보니 컴포넌트 테스트를 하려면 무조건 DOM 으로 불러와야하고, 사이즈가 큰 컴포넌트는 뭔가 잘 되지도 않고, 이럴거면 그냥 E2E만으로 하면 되지 않나 라는 생각도 들고... 실제로는 unit 테스트 도구로 컴포넌트 dom으로 불러와서하고 e2e도 따로 하시나요? 아니면 e2e로만, unit으로만 이렇게 한가지로만 하시나요??

vitest toHaveStyle

Input 컴포넌트를 클릭 했을 때, border-color가 제대로 변경되는지 확인하는 테스트 코드를 작성하고 있습니다. Input이 Focus 되었을 때 사진과 같이 border-color가 #3182ce로 변경되는데 테스트 코드 상에서는 에러가 발생합니다. expect($input).toHaveStyle({ borderColor: '', }); 이런 식으로 작성했을 땐 통과가 되는데 #3182ce 값으로 변경됐는지 확인 할 수 있도록 테스트 코드를 작성하는 방법이 있을까요?

react 테스트 코드 작성할 때 어떤 걸 사용하나요?

안녕하세요 프엔 신입입니다! 태스트코드를 적용시켜보려고 합니다. 찾아보니 jest가 제일 유명한 것 같은데 저희는 react, ts, vite를 사용하고 있습니다. cra의 경우 jest를 많이 쓰는 것 같은데 vite 환경이여도 상관 없는지 궁금합니다ㅠ vue 공식에서는 vitest라는 것을 사용하라고 하는데 정확히 무슨차이인지 와닿지 않아서ㅠ