전체 글18 리액트 테스트코드 - 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. 리액트 테스트 코드 - 2 테스트를 진행할 주제들에 대해서 선정을 진행했습니다 addTodo 컴포넌트 : 테스트 항목 : 빈 제목으로 할 일을 추가하면 에러 메시지를 표시. 빈 내용으로 할 일을 추가하면 에러 메시지를 표시. 빈 시작 날짜로 할 일을 추가하면 에러 메시지를 표시. 빈 끝 날짜로 할 일을 추가하면 에러 메시지를 표시. 정상적인 데이터로 할 일을 추가할 수 있는지 확인. 부가적: 제목 내용 시작날짜 끝날짜가 화면에 보이는지 함수 호출에 올바른 인자가 전달되는지 header 컴포넌트 : 테스트 항목 : 각 헤더에 보여줘야할 '홈' , '투두 작성' , '투두 전체' , '로그인'이 포함되었는지 list 컴포넌트 : 테스트 항목 : get 요청을 통해 받아온 Todo데이터를 랜더링하고있는지 완료하기/취소하기 버튼을 눌렀을.. 2023. 10. 30. 리액트 테스트코드 - 1 테스트 코드를 짜는데 있었던 어려움 :Error List: 1) jest 설정에서 이미지형식을 제외시켜도 에러가 뜸 2) 컴포넌트에서 사용한 useNavigate()에서 에서 벗어난 영역에서 사용한다는 에러가뜸 1) 1번 해결 ( jest 설정에서 이미지형식을 제외시켜도 에러가 뜸 )빠르게 테스트 코드를 짤수있을 줄 알았는데 생각도 못한 곳에서 에러 사항이 있었다 UI 테스트를 위해 간이 테스트 코드를 아래와 같이 짰다 Page 컴포넌트에 zzz라는 문자가 랜더링 되는지 테스트 하는 코드이다 import Page from '../components/main/Page'; import { render } from '@testing-library/react'; import '@testing-library/je.. 2023. 10. 28. 리액트 테스트코드 - intro 프로젝트를 몇개 진행 했었는데 테스트 코드를 작성하여 내 코드를 검증한 적은 없는 것 같습니다. 이를 위해 테스트코드에 대해 공부해보려합니다 우선 무작정 테스트를 적용하려고 보니 어떤 것을 어떻게 테스트 해야하는 지 어려웠고 현재 짜여있는 코드기반으로 테스트 코드 짜는게 새로 다 리팩토링하는 느낌이 들었습니다 이에 Todo List 를 하나 만들어서 테스트 코드를 만들어 보고 그다음에는 TDD방식으로 만들어볼 예정입니다 우선 테스트 코드를 만드는 게 왜 어렵나 생각해보니 각 코드의 상황을 명확하게 생각하지않고 코드를 짰기 때문인 것 같았습니다. 예를 들어 동작하지않는 상황을 고려하고 코드를 짠게 아니라 동작만되는 코드를 짜왔던 것 같습니다. 이에 투두리스트를 기존 방식대로 빠르게 만든 후 이를 리팩토링하.. 2023. 10. 25. 이전 1 2 3 4 5 다음
