일단 Doit

주로 사용하는 케이스만 작성하였습니다. 테스트 대상 조회 getByTestId : data-testid로 조회 ... // test.ts screen.getByTestId('title') 2. geByText : text로 조회 제목 ... // test.ts screen.getByText('제목') 3. geByRole : role로 조회 제목 ... // test.ts screen.getByRole('제목') 4. getAllByText, getAllByTestId, getAllByRole... : 해당 요소들을 전부 조회 - 결과값은 배열입니다. 제목 두번째 제목 세번째 제목 ... // test.ts screen.getAllByTestId('제목') 데스트 케이스 구현 1. toBeInTheDoc..

React/TDD 2023. 2. 18. 11:32

Rest API 테스트를 위해서는 jest의 mock Function을 사용합니다. 또한 Rest API는 async로 동작하기 때문에 mockResolvedValue 사용하여 결과값을 의미로 설정합니다. const getTodo = jset.fn(); getTodo.([ { id: 2, title: '할일', subTitle: '부제목', percent: 70 }, { id: 3, title: '할일', subTitle: '부제목', percent: 50 }, ]) Typesciprt에서 위와 같이 사용하면 아래와 같은 오류가 발생합니다. Property 'mockResolvedValue' does not exist on type getTodo가 mock function으로 변경된 것을 인지 하지 못해..

React/TDD 2023. 2. 18. 11:29

Front-end 에서 TDD의 중요성이나 필요성은 그동안 많은 블로그나 유투브 영상에서 많이 접하셨을텐데요. 여기서는 TDD를 어떻게 적용해보면 좋을까에 대한 이야기를 하고자 합니다. 개발은 기획서 또는 만들고자 하는 화면 정의서등에 따라서 진행됩니다. 그럼 기획자는 해당 화면에서 보여주고자 하는 결과등을 기획서에 작성하는데요. 여기서 그 결과가 바로 Testcase가 된다고 보시면 됩니다. 예를들면, 일반적인 얼럿 팝업에 대한 기획서가 있고, 기획에서 원하는 결과가 아래와 같다고 가정한다면. 1.팝업이 열려야 한다. 2. 제목이 나와야 한다. 3. 내용이 나와야 한다. 4. 닫기 또는 확인을 누르면 팝업이 닫혀야한다. 그러면 개발자는 위 내용 그대로 Testcase로 만들면 됩니다. 처음에는 Test..

React/TDD 2023. 2. 10. 14:55