중요: 본 포스팅에서 소개하고 있는 faker라는 라이브러리는 안타깝게도 안타깝게도 2022년에 faker를 유지보수하던 개발자가 불미스러운 일을 저질러 더 이상 사용하면 안 되는 라이브러리가 되었습니다. 가짜 데이터 생성을 위한 라이브러리가 필요하신 분들은 새로운 포스팅을 참고하시길 바랍니다. 가짜 데이터 시제품(prototype)을 개발하거나, 단위 테스트를 작성할 때 가짜 데이터가 필요할 때가 자주 있습니다. 이럴 때, 직접 가짜 데이터를 하드코딩(hard-coding)할 수도 있겠지만, 좀 더 편하고 빠르게 가짜 데이터를 얻
웹에서는 UI가 비동기로 업데이트되는 경우가 참 많죠? UI가 변경될 때까지 기다려줘야 하기 때문에 많은 개발자들이 테스트하기 어려운하는 부분입니다. 이번 포스팅에서는 Testing Library로 비동기(asynchronous)로 작동하는 React 컴포넌트를 테스트하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <Switch/> 컴포넌트 함수는 on 상태값에 따라 ON 버튼 또는 OFF 버튼을 리턴합니다. on 상태값은 최초에는 false이
테스트를 작성하다보면 다양한 테스트 데이터에 대해서 동일한 테스트 코드를 돌리고 싶을 때가 있죠? 이러한 테스팅 기법을 보통 파라미터화(parameterized) 테스팅이라고 하는데요. 이번 글에서는 Jest에서 제공하는 test.each()와 describe.each() 함수를 사용하여 파라미터화 테스트를 하는 방법에 대해서 배워보겠습니다. 파라미터화(parameterized) 테스트 간단한 실습을 위해 2개의 문자열의 인자로 받아 애너그램(anagram) 여부를 반환해주는 함수를 작성해볼까요? 이제 위 함수에 대한 테스트를 작성
브라우저 상에서 사용자가 발생시키는 이벤트에 웹 애플리케이션이 예상대로 반응하는지 어떻게 테스트할 수 있을까요? 이번 포스팅에서는 사용자와 애플리케이션의 상호 작용을 검증하기 위한 테스트 코드를 작성하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <LoginForm/> 컴포넌트는 이메일 입력란과 비밀번호 입력란, 로그인 버튼으로 구성되어 있습니다. 로그인 버튼은 이메일과 비밀번호가 입력되었을 때만 활성화가 되고, 클릭을 하면 prop으로 넘어온
이번 포스팅에서는 Jest를 이용해서 스냅샷(snapshot) 테스트를 하는 방법에 대해서 알아보겠습니다. Jest에 대한 기본적인 설치 및 사용 방법은 관련 포스팅를 참고하시길 바랍니다. 스냅샷 테스팅 스냅샷 테스팅(snapshot testing)이란 어떤 기능의 예상 결과를 미리 정확히 포착해두고 실제 결과에 비교하는 테스트 기법입니다. 테스트 대상 기능의 구현이 변경되어 실제 결과과 스냅샷을 떠놓은 예상 결과와 달라질 경우 해당 테스트 케이스는 실패하게 되는데요. 이럴 경우, 다시 새로운 스냅샷을 떠서 기존 스냅샷을 교체하는
가짜 데이터 소프트웨어를 개발하다 보면, 특히 시제품(prototype)을 개발하거나, 단위 테스트를 작성할 때 가짜 데이터가 필요할 때가 있습니다. 이럴 때, 직접 가짜 데이터를 하드코딩(hard-coding)할 수도 있겠지만, 좀 더 쉽고 빠르게 가짜 데이터를 얻을 수 있는 방법이 있어서 소개드리려고 합니다. 바로, Faker라는 라이브러리인데요. Faker를 사용하면 가짜 데이터를 정말 너무 간단하게 생성할 수 있습니다. 👍 패키지 설치 패키지 임포트 가짜 이름 생성 name() 메서드를 사용하면 간단하게 가짜 이름을 생성할
지난 포스팅에서 unittest.mock 모듈의 Mock 또는 MagicMock 클래스를 사용하여 기본적인 mocking을 하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 실전에서 더 많이 쓰이는 unittest.mock 모듈의 patch() 데코레이터를 이용하여 단위 테스트를 좀 더 세련되게 작성하는 방법에 대해서 알아보겠습니다. patching? mocking? unittest.mock 모듈의 patch() 데코레이터를 이용하면 특정 모듈의 함수나 클래스를 가짜(mock) 객체, 좀 더 엄밀히 말하면, MagicMock 인
본 포스팅의 내용을 문제없이 이해하려면 파이썬의 기본 테스팅에 대한 선수 지식이 필요합니다. 해당 지식이 부족하신 분들은 관련 포스팅를 먼저 읽고 돌아오시는 것을 추천드립니다. Mocking이란? 단위 테스트를 작성하다보면 데이터베이스 또는 외부 API에 의존하는 코드를 테스트해야 할 일이 필연적으로 생기기 마련입니다. 운영 환경 대비 제약이 많은 테스트 환경에서는 실제 데이터베이스와 연동하거나 실제 외부 API를 호출하기가 불가능한 경우가 많습니다. 가령 가능하더라도, 이렇게 외부 서비스에 의존하는 테스트는 해당 서비스에 문제가
어느 언어로 코딩을 하든 단위 테스트는 신뢰할 수 있는 애플리케이션을 개발하기 위해서 필수적으로 습득해야하는 기술입니다. 파이썬에서는 내장 모듈인 unittest을 통해서 다른 라이브러리 없이 비교적 간단하게 단위 테스트를 작성할 수 있습니다. unittest 모듈 unittest 모듈은 Java의 JUnit, JavaScript의 Jest 또는 Mocha와 같은 단위 테스트 프레임워크입니다. 다만 다른 언어와 달리 기본적으로 언어에 내장되어 있기 때문에 파이썬만 설치가 되어 있다면 바로 모듈을 불러와서(import) 사용할 수 있
지난 포스팅에서 jest.fn()과 jest.spyOn() 함수를 어떻게 사용하는지 배웠습니다. 이번 포스팅에서는 Jest에서 제공하는 또 다른 모킹 함수인 jest.mock()를 활용해서 좀 더 다양한 상황에서 모킹을 해보도록 하겠습니다. 자바스크립트 모듈 먼저 자바스크립트에서 모듈이 무엇인지에 대해서 간단하게 개념만 짚고 넘어가겠습니다. 모듈이란 어떤 코드를 다른 자바스크립트 파일에서 불러오기 편하도록 하나의 파일에 모아둔 것을 뜻하는데요. 프로젝트의 규모가 커지면 모든 자바스크립트 코드를 하나의 파일에 두기 어렵기 때문에, 자
Testing Library는 웹 프론트엔드 테스트에서 사실 상 표준으로 자리잡은 라이브러리입니다. React 뿐만 아니라 Vue, Svelte, Angular 등 거의 대부분의 자바스크립트 프레임워크를 지원하고 있죠. 이번 포스팅에서는 Testing Library를 사용해서 React 컴포넌트에 대한 테스트 코드를 어떻게 작성하는지 함께 알아보겠습니다. React Testing Library 소개 React Testing Library는 Behavior Driven Test(행위 주도 테스트) 방법론이 대두 되면서 함께 주목 받기
올인원(All-in-one) 테스팅 프레임워크 Jest를 사용하면 다른 라이브러리 설치 없이 바로 소위 mocking 기능을 쓸 수 있는데요. 그런데 여기서 mocking을 한국어로 뭐라고 번역해야 모르겠네요. 😅 주변에서 보면 “모킹”으로 그냥 영어를 차용해서 쓰고 있는 것 같습니다. mocking 이란? 먼저 mocking이 생소하신 분들을 위해서 mocking 대한 기본 개념부터 잡고 들어가는 게 좋을 것 같습니다. mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법을 말하
테스트를 작성하다보면 모든 테스트 함수에서 공통적으로 필요한 공통 로직이 필요할 때가 있습니다. 이번 포스팅에서는 Jest를 이용해서 이렇게 테스트 전이나 후에 항상 실행되야 하는 코드를 작성하는 방법에 대해서 알아보겠습니다. 테스트 대상 코드 데이터베이스에 접근하는 코드에 대한 테스트를 작성한다는 가정 하에, 다음과 같이 간단한 예제 코드를 작성해보겠습니다. 임의의 데이터베이스 역할을 하는 모듈로서 사용자 데이터를 저장하기 위한 users 배열을 가지고 있습니다. data 모듈에 저장되어 있는 users 배열에 사용자 데이터를 조
지난 포스팅에서 Jest로 기본적인 테스트 코드 작성하는 방법에 대해서 알아보았습니다. 자바스크립트 언어 특상 상 실제 프로젝트에서는 비동기(Asynchronous)로 돌아가는 코드를 테스트해야 할 일이 많은데요. Jest Runner가 비동기 코드에 대한 테스트라는 사실을 인지할 수 있도록 테스트를 작성해주지 않으면 예상치 못했던 테스트 결과에 당황할 수가 있습니다. 이번 포스팅에서는 이러한 비동기 코드에 대한 테스트를 작성할 때 흔히 하는 실수들과 적절한 대응 방법에 대해서 알아보겠습니다. 콜백 함수 테스트 먼저 콜백 함수를 이
Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들에게 사랑받고 있는 테스팅 라이브러리입니다. 출시 초기에는 프론트엔드에서 주로 쓰였지만 최근에는 백엔드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest: All-in-one 테스팅 라이브러리 페이스북에서는 Jest를 단순한 테스팅 라이브러리가 아닌 "테스팅 프레임워크"라고 부르는 만큼 기존 자바스크립트 테스팅 라이브러리와는 차별점이 있습니다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러 가지 테스팅 라이브러리를 조합해서