본문 바로가기

프론트엔드235

모의(Mock) 함수 단위 테스트는 최소한의 단위를 최소한의 시간을 드려서 하는게 좋다 따라서 시간이 걸리는 로직을 단순화 시키는데 이때 사용 되는것이 모의 함수 이다. 기존 코드 example.js // export 키워드를 붙여서 외부에서 테스트할수 있도록 설정 export function double(num) { // num 데이터가 없는 경우 if(!num) { return 0 } return num * 2 } // 기본값은 최대 5초 따라서 그 이상은 test코드 부분에서 설정해주어야 한다. export function asyncFn() { return new Promise((resolve) => { setTimeout(() => { resolve('Done!') }, 5000) }) } example.test.js.. 2022. 1. 20.
비동기 테스트 매개변수 done 이용방법: 비동기 함수가 언제 종료되는지 명시해주는 용도 return 키워드 이용방법: retrun 키워드를 붙여주는 것으로 테스트환경에서는 이부분을 비동기로 처리해야한다고 인지한다. resolves 브릿지 이용방법: return 키워드와 함께 사용해주어야 한다. async/await 키워드 이용방법: 콜백 자체를 비동기로 처리 (이 방법을 추천) example.js 코드 추가 // 기본값은 최대 5초 따라서 그 이상은 test코드 부분에서 설정해주어야 한다. export function asyncFn() { return new Promise((resolve) => { setTimeout(() => { resolve('Done!') }, 5000) }) } example.test.js .. 2022. 1. 19.
Jest Matchers 이해 Matcher: 일치도구 공식 문서 사이트 Expect · Jest (jestjs.io) Expect · Jest When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. jestjs.io 자주 사용하는 메소드 toBe(): 원시형 데이터 비교 toEqual(): 객체와 같은 참조형 데이터 비교 테스트 코드 작성 import { TestWatcher } from 'jest' const userA = { name: 'Happy', age: 85 } .. 2022. 1. 18.
Jest Globals 공식문서 사이트 Globals · Jest (jestjs.io) Globals · Jest In your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '@jest/globals'. jestjs.io example.test.js 파일 수정 import {double} from './example' describe('그룹1', () => { /.. 2022. 1. 17.
첫 테스트 tests -> example.js 파일 생성 // export 키워드를 붙여서 외부에서 테스트할수 있도록 설정 export function double(num) { return num * 2 } 명령어 스크립트 생성 -> package.json 파일에 코드 추가 "test:unit": "jest --watchAll" 콘솔창에 명령어 입력: npm run test:unit 성공 확인 실패 확인 example.test.js 코드 수정 import {double} from './example' test('첫 테스트', () => { expect(123).toBe(123) }) test('인수가 숫자 데이터입니다', () => { expect(double(3)).toBe(6) expect(double(10)).. 2022. 1. 16.
테스트 환경 구성 패키지 설치 jest 설치 명령어: npm i -D jest @vue/test-utils@next vue-jest@next babel-jest jest환경설정 js파일 생성 루트경로 -> jest.config.js 파일 생성 module.exports = { // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다. // 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다. // E.g. `import HelloWorld from '~/components/HelloWorld';` moduleFileExtensions: [ 'js', 'vue' ], // `~` 같은 경로 별칭을 매핑합니다. // `` 토큰을 사용해 루트 경로를 참조할 수 있습니다. // E.g. `import Hell.. 2022. 1. 16.

티스토리툴바