Dog foot print

Snapshot Test Snapshot test란 UI가 바뀌지 않았다는 것을 증명하는 유용한 도구이다. snapshot 은 UI컴포넌트를 렌더링 한 후, 이를 다음 테스트와 함께 저장된 스냅샷과 비교하며 테스트가 진행된다. snapshot테스트는 두개의 스냅샷이 일치 하지 않은 경우, 실패하게 됩니다. 이 경우, 새롭게 적용한 컴포넌트의 UI가 의도치 않게 변경되었거나, 컴포넌트가 버전이 변경되었음을 시사합니다. Snapshot Testing with Jest 모든 App의 그래픽 UI를 렌더하는 대신에, 테스트 렌더러를 사용하여, React 트리를 빠르게 생성 할 수 있습니다. import React from 'react'; import renderer from 'react-test-renderer..

Mock 함수는 테스트에서 사용 할 수 없는 함수(window.replace)와 함수에 어떤 파라메터가 전달되었는지, 인스턴스가 new 키워드로 생성되었을 때 생성자 함수를 캡쳐링 하는 것을 가능하게 도와준다. Mock 함수를 사용하는 방법은 두개가 존재한다. 이 두 방법은 test code에서 직접 Mock 함수를 생성하거나, 의존성 모듈에 직접 mock함수를 작성하는 방법이다. Using a mock function 다음과 같이 forEach 함수를 통해서 배열을 순회하며, 전달 된 callback으로 배열 내부에 아이템을 전달한다고 생각해보자. function forEach(items, callback) { for (let index = 0; index < items.length; index++) ..

테스트를 진행 하기 전 테스트를 위한 설정을 해주거나, 테스트가 종료된 이후에 설정을 변경해야 할 때가 종종 있습니다. 제스트는 이를 위해서 유용한 함수들을 제공합니다. Repeating Setup For Many Tests 만약 테스트가 종료된 후, 반복해야 할 코드가 존재할 때 `beforeEach` 또는 `afterEach`를 이용해 반복을 줄일 수 있습니다. 예를 들어, 테스트 마다 각 도시의 데이터베이스와 통신해야 한다고 가정하겠습니다. 개발자는 `initializeCityDatabase()`를 가지고 있고, 이는 테스트 전에 항상 호출 해야합니다. 또한 `clearCityDatabase()`를 테스트가 종료 될 때 마다 호출해야합니다. beforeEach(() => { initializeCit..

Note : 자바스크립트의 코드는 비동기적으로 작동합니다. 개발자가 코드를 비동기적으로 실행 할 때, 이를 위해 제스트에게 이 코드가 언제 완료 되는지 알려 주어야 합니다. callback 을 이용하기 비동기 코드를 확인 하는 가장 일반적인 방법은 콜백을 이용하는 것 입니다. 예를 들어, fetchData(callBack) 의 함수를 사용하는 경우, 함수는 어떤 데이터를 패치하고 마무리 되면 callback(data) 를 호출하게 될 것입니다. 아래의 코드에서는 ‘peanut butter’ 라는 string이 전달되는데, 개발자는 이를 확인 하고 싶을 겁니다. function fetchData(callBack){ setTimeout(()=>{ callBack("peanut butter"); },1000)..

Note : 제스트는 matcher를 사용하여, 사용자가 다양한 방식으로 값을 테스트 하게 도와줍니다. 이 문서는 주로 사용되는 matcher에 대해서 소개 하며, 모든 Mathcer에 대한 list는 다음의 링크를 참조하세요. 일반적인 Matcher들 다음 예제는 아주 간단한 방법으로 값이 예상하는 값과 일치하는지 확인 하는 방법입니다. test('two plus two is four',()=>{ expect(2 + 2).toBe(4); }) 이 코드에서, expect(2+2) 함수 호출은 ”expectation” 객체를 반환합니다. 일반적으로 이러한 expectation 객체에서 call matcher를 제외하고는 많은 작업을 수행하지 않습니다. 이 코드에서는.toBe(4) 가 Matcher 입니다...