Aplication test7 어떤 것을 기준으로 테스트 해야하는가? 1. 인터페이스를 기준으로 테스트한다 내부 구현을 기준으로 하면 결과가 같더라도 로직의 변경마다 테스트코드를 새로 작성해야하고 특정 상황에 리액트의 경우 테스트코드에서 상태를 모두 직접 변경해야함 -> 상태를 모두 직접 변경(캡슐화 위배) 해서 내부 구현을 검증하니 상태나 변수명이 변경되면 테스트코드에서도 변경해줘야함(내부구현과의 종속성) 이러한 문제가 있기에 인터페이스를 기준으로 테스트를 진행하게 됩니다 예를 들어 클릭이벤트를 통한 돔 변경을 검증하는 방식으로 테스트를 진행하는 것입니다. 내부구현과의 종속성이 없어 구현이 변경되어도 테스트를 만족한다면 문제가 없어짐 테스트커버리지는 꼭 100%가 되어야 하는가? 테스트 커버리지를 100%로 만족하기위해서는 모든 분기의 테스트를 진행해야합니다 2가지 의문.. 2024. 1. 26. 테스트 코드의 의의 테스트코드가 필요하다고 생각이 된 이유는 쇼핑몰 사이트의 카테고리페이지를 제작하면서 입니다 여러 컴포넌트에서 같은 훅을 사용함으로써 사이드 이펙트 문제가 있었음 현재 상황은 수정된 코드를 사용해도 지장이 없지만 높은 결합도를 지니는 코드였다면 다른 모듈에 영향을 끼쳐 예상하지못한 동작을 발생시킬수있음 또한 추후 리팩토링을 하는 과정에서도 테스트 코드를 기반으로 안정적으로 진행이 가능 -> 문제가 발생했을 때 테스트코드의 피드백을 통해 빠르게 개선 가능 현재까지 컴포넌트를 나누는 단위를 랜더링만을 고려했다면 추가적으로 테스트를 고려하여 하나의 컴포넌트가 하나의 동작을 수행하는 설계를 하게된다. 테스트코드가 잘 작성되어있다면 다른사람이 리팩토링할때 페이지의 시나리오를 이해하기 쉽다 발생한 문제 : WOMEN.. 2024. 1. 26. 리액트 테스트코드 - add add 컴포넌트는 특이하게 제목, 내용, 시작날짜, 끝날짜의 입력을 받기 때문에 테스트해야하는 요소가 추가된다고 생각합니다 이에 아래항목을 테스트하였습니다. 테스트 항목 : 빈 제목으로 할 일을 추가하면 에러 메시지를 표시. 빈 내용으로 할 일을 추가하면 에러 메시지를 표시. 빈 시작 날짜로 할 일을 추가하면 에러 메시지를 표시. 빈 끝 날짜로 할 일을 추가하면 에러 메시지를 표시. 정상적인 데이터로 할 일을 추가할 수 있는지 확인. 부가적: 제목 내용 시작날짜 끝날짜가 화면에 보이는지 함수 호출에 올바른 인자가 전달되는지 우선 빈 제목으로 할 일을 추가하면 에러 메시지를 표시하는지 확인하였습니다 it("빈 제목으로 할 일을 추가하면 에러 메시지를 표시", async () => { const mockAd.. 2023. 10. 31. 리액트 테스트코드 - list , header list 컴포넌트 : 테스트항목 : get 요청을 통해 받아온 Todo데이터를 랜더링하고있는지 완료하기/취소하기 버튼을 눌렀을때 _changeTodo API에 정확한 인자를 전달하는지 우선 list 컴포넌트의 get 요청을 처리하기위해 get 요청결과를 임시로만들어서 테스트 진행했습니다 describe("listComponent", () => { it("get API를 통해 받아온 데이터 랜더링 확인", async () => { //path가 running 일때 받아올 더미데이터입니다 const responseData = [ { id: "1", title: "Dummy Task 1", detail: "Sample detail", state: false, startDate: "2023-10-30", end.. 2023. 10. 30. 이전 1 2 다음