Mocking- 실제값이 아닌 가짜값을 주입하여 이를 통한 테스트 환경을 통제하여 의존성의 독립을 가져온다.- import 를 통해 외부 모듈을 값이나 로직을 수정함으로 인해 모듈 내의 동작이 의도에 맞게 동작하는지 검토할 수 있다(외부 환경 요인에 대한 적절한 통제)- Mocking은 제어할 수 없는 것을 대체할 수 있다. Jest mocking- 의존성을 Mock function으로 대체- Jest의 mock 함수는 함수 호출 기록, 반환값 설정, 모듈 구현 내용 변경에 대한 기능을 가진다. 1. Mock함수를 만들고 호출 캡쳐 const mockFn = jest.fn(); expect(mockFn).toHaveBeenCalledTimes(3) // mock 함수는 3번 호출됨 // ..

서버로 부터 api를 호출하여 데이터를 받아오는 것을 mocking을 활용하여 처리하는 방법 모든 테스트에서는 api를 실제 호출하기 보다 요청을 모의하여 데이터를 가져올 수 있다.이를 통해 사용할 수 없는 백엔드로 인한 비정상적인 테스트를 막을 수 있고,모의 에러를 이용한 에러의 대응, 의도된 여러가지 응답에 대한 처리를 리액트 컴포넌트 안에서 테스트로 확인할 수 있다.실제 request, response에 소모되는 시간낭비도 방지할 수 있다. 서버로의 request를 모의 데이터로 처리하는 방법 경우 2가지 1. fecth2. axios fetchfetch api의 모의 데이터를 받아오는 방법을 jest function 함수를 이용한 수동 moking 방법과 라이브러리를 이용한 방법모의 데이터에 의존..

render 함수기능- 컴포넌트를 document.body에 붙여서 렌더링 시킨다. 반환값1. query objectsrender 함수의 반환 값으로 getByRole을 사용할 수 있다. const { getByRole } = render(// 버튼 역할을 하면서 - name을 가진 element가 document에 있는지 찾음expect(getByRole('button', { name: "-" })).toBeInTheDocument() screen object를 통해서 getByRole 함수에 접근할 수 있다.expect(screen.getByRole('button', { name: "+" })).toBeInTheDocument(); 2. container- 리액트 컴포넌트가 렌더링 된 DOM Node..

AAA 패턴(Arrange / Act / Assert)1. Arrange: 테스트 전 준비사항들을 구성한다. state, service를 준비하고 라이브러리들을 Mocking하는 단계이다. 테스트할 element를 렌더링하는 과정이 포함된다. 앞서 설정과 해지 패턴에서 알아본 beforeEach와 afterEach를 작성한다.  2. Act: User의 액션에 따른 테스트 코드를 실행한다.  3. Assert: Act로 인해 변경되거나 구성되는 값들을 검증하는 과정이다. element의 값을 검증, element의 생성과 소멸 상태값의 변경 시간에 따라 변화하는 값을 감지한다. 사용자의 의도적인 인터랙션에 의해 변화되는 모든 값을 검증하는 과정이다. AAA 패턴 예describe(' component',..

설정과 해지를 통한 환경의 격리테스트하고자 하는 컴포넌트를 순수하게 외부환경으로 부터 격리할 수 있다환경변수, 글로벌 변수, import, 다른 리액트 컴포넌트로 부터언제 어디서나 테스트가 실행되더라도 같은 결과를 낼 수 있도록 통제할 수 있다. 테스트 전에 데이터 세팅, 특정 모듈 모킹 등 동작을 통해 테스트 시작환경이 동일하도록 조성하고같은 방식으로 테스트 수행 이후에 테스트 동안에 변경되었던 값을 초기화 하여 차후 테스트에 주는 영향을 방지한다.  설정 (Setup)과 해지 (Teardown) 예시Timer를 이용하는 경우 (setTimeout, setInterval, clearTimeout, clearInterval) 테스트는 예측이 어려워지고 느려진다.이런 경우에는 fake timer를 이용하는..