JAVASCRIPT TESTING
1.Cypress 기본 문법 1
cypress 공식문서에 튜토리얼이 정말 잘 정리되어있다.모든 내용은 공식 홈페이지에 나와있으니 참고바란다.cypress 공식문서(https://docs.cypress.io/examples/examples/tutorialscypress.json에 baseUrl
2.Cypress 기본문법 2
한번에 묶어서 for loop처럼 테스팅을 진행 할 수 도 있다.can refactored into the code below비동기 request가 끝날때까지 기다렸다가 테스트를 진행한다.일종의 await 와 비슷하다고 보면 된다.우선 JSON server를 설치하자!
3.INSTACOOLIKE 테스팅 코드 TIL
사진에서 처럼 await has no effect 라고 되어있으면서 await를 없애면 event가 먹히지 않는다... 아무것도 입력되지 않은것으로 나온다. await를 입력하자...(진짜 이것때문에 1시간이상을 헤맸다... jest 일해라...)Use .toHaveB
4.Bruno의 jest 강의 2 (비동기 통신 테스트)
테스트 할때마다 D라는 데이터를 비동기통신으로 받아와야 하는 경우가 있다고 하자. 그럼 beforeEach에 D를 await하는 코드를 짜는게 훨씬 효율적이다. 아래 코드와 같이 말이다.\+를 클릭하면 비동기 통신을 통해 incrementor에 따른 숫자를 받아오는 앱
5.Bruno의 jest 강의 3 (mocking)
obj.method에서 method가 몇 번 호출되었는지, 무슨 para가 pass되었는지를 tracking할 수 있다. 그리고 method가 어떤 값을 리턴하는지 정할 수 도 있다. 첫번째 arg에는 obj를 두번째는 method를 pass하면 된다.mockImple
6.Bruno의 jest 강의 4 (MSW, custom render)
이번엔 Mock Service Worker라이브러리를 이용해 api 모킹을 조금 더 간편하게 해볼것이다. 그리고 반복되는 render코드가 있다면 역시나 반복을 줄이는 법을 배워볼 것이다.Mock Service Worker(MSW)는 api 를 모킹할때 사용하는 라이브
7.Bruno의 jest 강의 5 (form 테스트)
만약 모든 field의 validation이 다 통과되는 경우를 happy path라고 한다. form을 이용해서 happy path를 테스트 한다고 하자. 그럼 submit을 누를경우 micro task로 옮겨진다. 왜냐면 form 태그는 http post/get을
8.act 경고문 도대체 너는 누구냐...
증말 많이 봤고 짜증나는 경고문이다.우선 act가 무슨 함수인지 알아보자.When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of in
9.jest tip
짜잘하게 알아낸 jest 문법, 설정방법 등등 알아낸것을 적는 공간path alias 를 설정시 tsconfig 뿐만 아니라 jsconfig / babelrc 에도 설정해주어야 함image path를 import하지 말고 image src에 string으로 그대로 적으
10.<common mistakes with using react testing library 요약>
리액트 테스팅 라이브러리 사용시 자주 저지르는 실수(https://kentcdodds.com/blog/common-mistakes-with-react-testing-library: That toBeDisabled assertion comes from jest-
11.FunChat 테스팅 코드 TIL
testing playground에 들어가서 테스팅 하고 싶은 DOM을 복사 붙여넣기 하면 알아서 특정 DOM을 select할 수 있도록 가장 최적의 jest api를 추천하고 있다.일일이 공식문서를 보면서 골머리를 앓을 필요가 없다는 것!''를 제거할것. 아래 코드를