Frontend Testing

[dotoleeoak]

Describe the problem and solution

접근 🔓

Backend와 달리 frontend는 순수한 코드만 동작하는 것이 아니라, HTML과 CSS 등의 markup과 함께 UI를 그리며 동작하므로 backend에 비해 testing하기 다소 까다롭습니다.

이에 관해 여러 방법론이 있는데, 개인적으로 가장 바람직한 것으로 본 건 한재엽 님께서 블로그에 작성하신 글입니다.
https://jbee.io/react/testing-1-react-testing/
https://jbee.io/react/testing-2-react-testing/
https://jbee.io/react/testing-3-react-testing/
https://jbee.io/react/testing-4-react-testing/

내용을 추려 말하면, UI 부분과 logic 부분을 분리해서 코드를 작성하고, 테스트는 UI 부분은 Storybook으로, 코드 부분은 Jest로 한다는 설명입니다. 이 글이 React 기준으로 쓰여있어서 Vue 2 기준으로는 'logic 부분'을 분리하는 것이 불가능하지만, Vue 3의 composition API는 가능합니다. 즉 최대한 코드를 composable과 store로 분리시켜놓고 이를 test하는 것이죠. 지금까지 제가 알아보기론 이 접근이 가장 유용한 것 같습니다. 이 외에도 testing 관해서 조사한 내용이 많지만, 여기선 추가로 설명하지 않겠습니다.

사용할 library 📚

Logic 부분의 test는 Vitest, UI testing은 Cypress와 Storybook을 용도를 나눠 쓰는 게 좋을 것 같습니다. Reusable한 component는 Storybook, 전체 페이지나 E2E test는 Cypress 정도로요.

Sub-issue ⛳

• Frontend E2E(End to End) Testing: Cypress #27

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines
• Check that there isn't already an issue

[dotoleeoak]

추가로 지금 Vitest에서 개발 중인 기능으로 browser 내 테스팅 지원을 준비 중입니다. 이 기능이 구현되면 기존의 Jest와 같은 tool에서는 JSdom을 사용해 테스트했기 때문에 브라우저 환경과 어느 정도 차이가 있었는데, client 환경에 더 가깝게 테스트해볼 수 있는 아주 기대되는 기능입니다. 😁

[jimin9038]

#1898 에서 작업 중입니다.

[jimin9038]

Changed the connected Notion task status to done

TAS- 페이지 배너 리디자인

[jimin9038]

Changed the connected Notion task status to not-started

TAS- 페이지 배너 리디자인