jest4 [React] 테스트 프레임웍 jest (4/4) - React Apps 테스트하기 이 글은 공부를 위해서 "Testing React Apps"를 번역 정리한것 입니다. 예제는 TypeScript를 사용하도록 수정되었고, 내용도 현재 버전에 맞도록 수정된 곳이 있습니다. 전체 내용은 원문을 참고 하시기 바랍니다. React App을 jest로 테스트하기 위한 가장 간단한 설정 방법은 Create React App을 사용해서 프로젝트를 만드는 것입니다. Create React App을 사용해서 프로젝트를 생성했다면 이미 jest를 사용할 수 있도록 구성이 되어 있을 것입니다. 여기에 화면 렌더링 스냅샷을 테스트할 수 있는 하나의 패키지만 추가로 설치하면 됩니다. # yarn 사용시 $ yarn add --dev react-test-renderer # typescript를 사용하면 type.. 2023. 6. 21. [React] 테스트 프레임웍 jest (3/4) - jest Matchers jest에서 값을 테스트하는데 사용하는 함수가 Matcher입니다. 많은 Matcher들이 있지만 자주 사용하는것 몇가지만 알아봅니다. 전체 내용은 jest 공식 홈페이지의 Expect DOC에서 찾을 수 있습니다 1. Expect - expect(value) : 테스트할때 매쳐와 함께 사용됩니다. 테스트 하고자 하는 값을 받고, matcher를 이용해 기대값과 비교합니다. test('1 + 2는 3', () => { // 더하기 함수 add(1, 2)의 결과가 3이면 성공입니다. expect(add(1, 2)).toBe(3); } 2. Matchers - toBe( value) : 완전히 일치하는지 테스트 합니다. 기본타입의 값과 객체 인스턴스의 참조 ID가 같은지 확인합니다. - toEqual( va.. 2023. 6. 17. [React] 테스트 프레임웍 jest (2/4) - jest API jest 테스트 프레임웍에서 사용되는 함수에 대해서 알아봅니다. 테스트 파일은 파일명과 확장자 사이에 test를 넣으면 됩니다. 예로 index.js 파일의 테스트 파일을 만든다면 index.test.js 파일로 만들면 됩니다. 1. 테스트 함수 - test(name, fn, timeout) : 테스트를 수행하는 가장 기본적인 함수 입니다. name은 테스트 이름이고, fn은 테스트를 수행하는 함수입니다. timeout은 밀리초 단위의 값으로 테스트가 수행되기를 얼마나 오랫동안 기다리는지 지정합니다. 기본값은 5초 입니다. ※ name은 동일한 describe 블럭 내에서 같은 값을 사용하면 Visual Studio Code에서 오류 표시가 납니다. 실행에는 문제가 없지만 구분을 위해서도 중복되지 않게 .. 2023. 6. 13. [React] 테스트 프레임웍 jest (1/4) - 샘플 프로젝트 만들기 자바스크립트 테스트 프레임웍인 jest를 사용해 봅니다. React와 함께 많이 쓰입니다. 사용된 운영체체는 fedora linux 입니다. 테스트 프로젝트 만들기 jest를 연습해볼 테스용 프로젝트를 만듭니다. 1. 프로젝트 폴더를 만듭니다. $ mkdir jest-app 2. 프로젝트 폴더로 들어가서 프로젝트를 초기화합니다. 모든 질문에는 엔터키를 입력하여 기본값을 선택합니다. typescript를 사용할 거라면 index.js 대신에 index.ts 를 입력합니다. 완료되면 package.json 파일이 만들어 집니다. $ cd jest-app # npm 사용시 $ npm init # yarn 사용시 $ yarn init 3. git repository를 만듭니다. git이 없으면 "jest --w.. 2023. 6. 5. 이전 1 다음
