FRONT-END

mount vs shallowMount

Header.vue 테스트

*beforeEach메소드를 통해 테스트1이 종료된 후 오염된 기본값을 다시 초기화 해주도록 설정 할 수 있다.

비동기로 미리 res를 만들어 promise가 처리될시 resolve가 반환되는데 내부 값을 res로 주어 미리 선언한 res가 나오게 된다.

promise~resolve를 쓰지 않고 mock처럼 가짜함수를 만들어 처리하면 로직이 쉬워진다.

vue를 위한 jest위주 테스트 설치

npm i -D jest @vue/test-utils@next vue-jest@next babel-jest

jest.config.js 구성

jest의 test()를 사용하기 이해 eslint에서 설정을 해준다.

테스트할 함수 작성

package.json에서 스크립트 선언

"test:unit":"jest --watchAll" // watchAll은 jest가  테스트 변경사항에도 지속적으로 감지하도록 설정

describe('그룹1',()=>{ test() 모음 }) //여러 test()들을 그룹화 시킴

* 객체데이터나 배열같은 참조형 데이터를 비교할때는 toBe가 아닌 toEqual를 쓴다.

* 테스트 대기시간 기본값은 5000ms이다.

비동기 테스트

비동기 모의함수

vue/test-utils (VTU)

https://next.vue-test-utils.vuejs.org/api/#html

html - 자바스크립트 환경에서는 import / exports 를 사용

node.js - 자바스크립트 환경에서는 require / exports 사용

*서버리스함수에서 데이터가 객체로 전달 될 시 JSON.stringify를 사용한다.

*서버리스는 가져올때 body부분의 데이터를 문자로 가지고 있지만 사용할때 JSON.parse를 통해 객체로 만들어야한다.

환경변수 설정으로 중요한 키는 .env에서 관리하기

1. npm i -D dotenv-webpack 설치

2. webpack.config.js에서 import 및 plugin 선언

3. .env 파일 생성

API_KEY=7035c60c

4. API_KEY가 선언되있는곳에 .env의 API_KEY를 불러오기

5. .gitignore에 .env 선언 (*선언할시 netlify에서는 업로드가 없는걸로 되니 별도로 netlify웹에서 환경변수선언해야함)