콘요맘떼 개발일지

꼭 animate가 아니더라도 Dom element가 가지는 메소드를 사용할 때 기능은 멀쩡히 동작하는데 테스트 코드에서는 해당 메소드가 undefined로 나오는 오류가 발생할 수 있다. 이는 @testing-library/jest-dom에 해당 메소드가 구현되지 않았기 때문이다. 따라서 해당 메소드를 다음과 같이 명시적으로 추가해줘야 한다. (관련 링크)

코드를 테스트하다보면 비동기 코드 역시 테스트의 범위에 포함되는 순간이 온다. 그런데 일반적인 자바스크립트 코드가 실행될 때와 마찬가지로 Jest로 작성한 테스트 코드 역시 비동기 코드를 처리하기 위해서는 추가적인 작업이 필요하다. 다음과 같은 간단한 예시를 생각해보자. 1) A라는 버튼 컴포넌트를 테스트한다. 2) A버튼을 누르면 비동기로 어떠한 작업이 처리된다. 3-1) 해당 작업이 성공하면 성공했을 때의 콜백을 실행한다. 4-1) 해당 작업이 실패하면 실패했을 때의 콜백을 실행한다. 테스트도 그렇게 어려워보이지는 않는다. mocking을 통해 비동기 작업의 결과를 지정한 다음 각각의 경우에 callback 함수가 실행되는지 여부를 검사하면 될 것이다. 그런데 막상 각 콜백 함수를 toBeCalled..

jest.spyOn(object, method) jest.spyOn은 특정 객체안에 담긴 메소드를 가짜로 대체하지 않고 그 호출 여부, 호출 방식 등의 정보를 활용하기 위해 사용한다. 첫 번째 인자로 객체를, 두 번째 인자로 메소드 명을 전달해주면 해당 메소드의 Jest 가짜 함수(mock function)가 반환된다. 그렇기 때문에 반환된 함수는 expect와 함께 toBeCalled와 같이 호출 관련 정보를 테스트하거나 혹은 더 나아가서 mockReturnValue, mockmockImplementation 등의 mock function 메소드를 통해 그 내부를 바꿔칠 수 있다. 바로 이 점에서 jest.spyOn이 빛을 발한다. 그냥 jest.fn( )을 활용하여 가짜 함수를 생성한 후 직접 객체의..

에러 메시지에서 볼 수 있다시피 jest.mock에서는 범위 바깥의 변수를 함부로 참조할 수 없다. 이러한 에러가 발생하는 이유는 jest의 모킹이 모듈 최상단으로 호이스팅되기 때문이다. 그렇기 때문에 jest.mock( )시점에서 봤을 때 해당 변수는 존재하지 않기 때문에 Reference Error이 발생하는 것이다. 해결 방법은 에러 메시지의 마지막 부분에서 찾을 수 있다. 간단하게 참조할 변수의 이름 앞에 mock를 붙여주면 된다. 다음 예시는 카테고리의 목록을 fetch한 후 그 목록을 보여주는 Categories 컴포넌트의 테스트 코드이다. 실제로 fetch 작업을 수행할 필요는 없기 때문에 testUtils 파일에 미리 정의해놓은 가짜 카테고리 목록을 가져와서 보여주기로 했다. 그러나 그냥 ..

모킹 (Mocking) 모킹은 유닛 테스트 코드를 작성할 때 테스트하는 코드가 의존하는 일부분을 가짜로 대체하는 기법을 의미한다. 모킹의 대상은 테스트 목적과 거리가 있거나 테스트 코드 구현 혹은 실제 테스트 과정에서 지나치게 리소스를 차지하는 코드이다. 혹은 DB에 접근하는 것과 같이 side effect를 유발시키거나 결과의 일관성을 방해하는 코드들도 모킹을 적용하는 것이 좋다. 모킹 기법을 활용하면 특정 일부분만을 테스트하는 유닛 테스트의 목적에 부합하면서 빠르고 가벼우면서도 매번 동일한 결과를 반환하는 테스트를 수행할 수 있다. 자바스크립트의 테스팅 라이브러리인 Jest는 여러 가지 모킹 기능을 지원한다. 오늘은 그 중에서도 jest.fn( ) 메소드를 다뤄볼 것이다. jest.fn( ) jest..