목차 문제 정의 Cypress? Cypress hydration test 작성 Local에서 테스트 해보기 Github action 연동하기 작동 동영상 질문타임 문제 정의 문제가 뭐였길래? 🚨 우리의 개발 환경은 빠르게 개발을 하기 위해 CSR 환경이다. 배포 환경은 SSR 환경이다. 👉 개발 환경과 배포 환경이 다르기 때문에 빠른 머지를 할때 build test를 건너 뛰기 쉽다. 👉 다른 사람 코드를 건들이기 어렵다. 👉 hydration 테스트가 귀찮다. 그래 ! 😎 그럼 Cypress로 Hydration 테스트를 자동화를 하자! Cypress가 뭔가유? 먹는건가유? Cypress에 대해서 알아보자! Cypress는 Javascript End to End 테스트 프레임워크 입니다. 더 많은 정보를..
📌 목차 00.Introduction 01.Mixin Test하기 02.Conclusion 📌 00.Introduction 이번 포스팅은 mixins의 테스트 방법에 대해 다룹니당. 🎉 mixins는 그렇게 어렵지 않아요.(컴포넌트 테스트와 비슷하게 합니다.) 이번 포스팅에서는 어떻게 mixins를 테스팅하는지에 대해 알아보겠습니다. mixins는 counter example로 진행합니다. 해당 코드는 여기에서 보실수 있습니다. 📌 01.Mixin Test하기 이번 포스팅은 이해를 돕기 위해 먼저 counter mixins 코드를 짜보고 그뒤에 테스트 코드를 작성하겠습니다. 해당 코드는 이렇게 됩니다. // CounterMixins.js export default { data: () => ({ count..
목차 Introduction What is Test Double Stub Spy Mock Conclusion Reference 📌Introduction 이번편은TDD를 하기위해 test double이라는 것에 대해 부가적으로 알아보는 포스팅입니다. 📌What is Test Double? 테스트 더블이란 실제 객체를 대신해서 테스팅에서 사용하는 모든 방법을 말합니다. 예를 들어 보겠습니다. 다음과 같은 실제 api 통신을 하는 함수가 있다고 가정해봅시다. asnyc function getTodos() { await axios.get('jsonplace-holder/todos'); } getTodos를 테스팅하려면 실제 네트워크 api를 사용하게 됩니다. 이것은 네트워크 연결 상태에 영향을 받을 것이고 항상..
📌 목차 서론 TDD를 하면서 겪었던 어려움들 TDD를 하면서 좋았던 점들 결론 📌 서론 이번 포스팅에서는 그동안 다뤘던 tdd에 관해 회고 해보는 포스팅 입니다. 개인적으로 tdd를 하면서 겪었던 어려움들 그리고 느꼈던 생각들을 정리해 보는 포스팅입니다. 📌 TDD를 하면서 겪었던 어려움들 TDD를 하면서 겪었던 어려움들은 다음 세가지가 있습니다. 어디까지 test를 해야할까? 어떻게 하면 의존성을 줄일 수 있을까? testcase가 잘못 되면 어쩌지? 1. 어디까지 test를 해야할까? 모든 코드를 test code로 커버한다는 것은 매우 어렵고 비생산적인 일입니다. 그렇다면 어디까지 testcode를 작성을 해야할까요? 어느 부분에서 실수가 가장 많이 날까요? 이런것들은 어쩔수 없는 경험이라고 생각..
목차 vscode snippet 이란? vscode snippet 사용하기 📌 1. vscode snippet 이란? 미리 지정해둔 예약어로 코드를 생성하는 기능 입니다. 이기능을 사용하여 일일이 쳐야하는 describe('', () => {})와 it('', () => {}) 를 자동적으로 생성해보겠습니다. 📌 2. vscode snippet 사용하기 설정 먼저 Code > Preferences > User Snippets로 이동합니다. file이름을 정의하고 javascript로 설정합니다. 그럼 이런 파일이 열리게 됩니다. 이제 이렇게 예약어를 등록할 수 있습니다. "describe": { // 제목 "prefix": "desc", // 예약어 "body": "descr..
Table of Content Introduction Usage of Cypress1 Usage of Cypress2 Usage of Cypress3 Usage of Cypress4 Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 e2e test를 진행합니다. Cypress를 이용하여 진행하게 될 것입니다. 🎉 이번 포스팅은 간단하게 tdd-todo를 통하여 5개의 todo를 추가해보고 5개가 정말로 추가가 됬는지에 관한 e2e테스트를 진행하려고 합니다. 🚨해당 포스팅에서는 설치 방법에 대해서는 다루지 않습니다. 또한 Cypress의 문법과 같은 자세한 방법은 다루지 않습니다. 📌 Usage of Cypress1 Cypress를 이용하기 전에 DOM 탐색 할..
Table of Contents Introduction Use of Storybook in vue How to bind vuex with storybook Conclusion Apply to Test Reference 📌 Introduction Vuex, vue component에 이은 storybook편 입니다. 여때까지는 logic에 관한 부분을 testing 했다면 이번에는 view에 관한 부분을 테스팅하는 방법에 대해 말하고자 합니다. View를 테스팅하는 방법은 여러가지가 있는데 왜 Storybook이 왜 tdd에 들어갔는지 의아하실 텐데요. 그이유는 storybook의 mock값을 그대로 사용가능하고 component를 독립된 환경에서 값만 바꾸어볼 수 있기 때문입니다. 이번 포스팅에서는 간단..
Table of Content Introduction Testing state Testing getters Testing mutations Testing actions Conclusion Reference 📌00. Introduction 이번편에서는 vuex를 테스팅하는 방법에 대해 공유하고자 합니다. 해당 코드는 vue-test-practice에서 확인할 수 있습니다.🎉 해당 편에서는 기본적으로 Component편의 counter를 구현하는 예제에서 api mock을 실제로 실현 해보기 위해 json placeholder에 todos를 불러오는 예제도 같이 진행하려고 합니다. 📌 01. Testing State state는 보통 getDefaultState 같은 함수형으로 선언을 해주는것이 좋습니다. ..
