React/jest
-
[React Testing Library] msw를 활용한 mock API 테스트React/jest 2023. 8. 4. 21:07
3. MSW를 활용한 mock API 테스트 본 라이브러리를 학습하기 위해 코딩앙마님의 강의를 수강하였습니다. 3.1 Mock Serveice Worker 다운 및 세팅 Node - Getting Started Mock Service Worker Docs mswjs.io Install - Getting Started Mock Service Worker Docs mswjs.io 위 사이트를 방문해서 install 및 integrate를 해준다. src/mock 안에 handlers.js + server.js를 생성하면 된다. 그 후 src/setupTests(생성X).js의 내용을 다음과 같이 수정한다. // jest-dom adds custom jest matchers for asserting on DO..
-
[React Testing Library] 기본 활용법, 유저 이벤트 테스트React/jest 2023. 8. 4. 20:41
0. Introduction Jest를 사용하면서 대부분 함수 단위의 유닛 테스트나 통합 테스트만 사용했었다. 팀 단위 프로젝트의 CI/CD를 구상하면서 리액트 컴포넌트가 잘 렌더링되고 있는지 확인이 필요했고, CRA에서 기본적으로 지원하는 React Testing Library를 사용해보기로 하였다. 1. 기본 개념 본 라이브러리를 학습하기 위해 코딩 앙마님의 React Testing Library 강의 영상을 수강하였고, 기본 개념과 코드들은 해당 영상을 참고하여 작성하였다. 1.1 컴포넌트 렌더링 테스트 가장 기본적인 App 컴포넌트가 렌더링되고 있는지에 대한 테스트를 작성해보자. 아래의 테스트는 App 컴포넌트를 렌더링하여 heading역할을 하는 요소를 받아온다. 그리고 해당 엘리먼트가 화면에 ..
-
[Jest] 기본 활용법React/jest 2023. 8. 3. 14:38
설치 및 세팅 설치 npm install jest --save-dev 개발환경에서만 테스트를 사용을 하니 개발환경에 설치 세팅 npm test를 치면 테스트가 가능 ~.test.js 에 해당하는 파일을 전부 검사 참고 : https://www.youtube.com/watch?v=g4MdUjxA-S4 Matcher toBe test("1은 1이야", () => { expect(1).toBe(1); }); expect : test할 값 toBe : 예상하는 값 test("1은 2가 아니야", () => { expect(1).not.toBe(2); }); 부정값을 예상하는 경우 test("0.1+0.2 = 0.3??", () => { expect(fn.add(0.1, 0.2)).toBeCloseTo(0.3);..