전체 글
-
단위 테스트 - VTU 테스트 및 API테스트/단위 테스트 (Vue) 2021. 9. 7. 02:41
VTU (Vue Test Utils) - Vue.js 환경에서 단위 테스트를 하기 위한 공식 라이브러리 예제 Example.vue {{ msg }} example.test.js import { mount } from '@vue/test-utils' import Example from './Example.vue' test('메시지를 변경', async () => { const wrapper = mount(Example) // wrapper.vm === this expect(wrapper.vm.msg).toBe('Hello Vue test utils!') // wrapper.vm.msg = 'Hello ITBlue!' - 반응성 유지X // 반응성을 유지하려면 setData() 사용 await wrapper..
-
단위 테스트 - 모의(Mock) 함수테스트/단위 테스트 (Vue) 2021. 9. 5. 00:22
단위 테스트 - 모의(Mock) 함수 1 비동기함수 /* example.js*/ export function asyncFn() { return new Promise(resolve => { setTimeout(() => { resolve('Done!') }, 6000) }) } 테스트 /*example.test.js*/ import * as example from './example' describe('비동기 테스트', () => { test('async/await', async () => { // jest.spyOn(객체명, 메소드명) // asyncFn() 비동기 함수를 모의 함수로 만듬 // mockReselvedValue() 비동기로 실행이 되면 데이터를 반환 jest.spyOn(example, '..
-
단위 테스트 - 비동기 테스트테스트/단위 테스트 (Vue) 2021. 9. 4. 10:56
단위 테스트 - 비동기 테스트 비동기함수 /*example.js*/ export function asyncFn() { return new Promise(resolve => { setTimeout(() => { resolve('Done!') }, 2000) }) } 테스트 /*example.test.js*/ import { asyncFn } from './example' describe('비동기 테스트', () => { // 비동기 테스트 - 패턴1 // test() 두번째 인수 콜백으로 done 매개 변수 사용, 함수처럼 실행 가능 // 비동기가 종료되는 시점에 실행 test('done', (done) => { asyncFn().then(res => { expect(res).toBe('Done!') do..
-
단위 테스트 - Jest Matchers테스트/단위 테스트 (Vue) 2021. 9. 4. 02:52
단위 테스트 - Jest Matchers (일치 도구) /*example.test.js*/ const userA = { name: 'ITBlue', age: 35 } const userB = { name: 'ITRed', age: 25 } // expect(데이터) // toBe(비교할 기대값 작성 - 원시 데이터) // toEqual(비교할 기대값 작성 - 참조형 데이터) test('데이터 일치', () => { expect(userA.age).toBe(35) expect(userA).toEqual({ name: 'ITBlue', age: 35 }) }) // not - 거짓을 참으로, 참을 거짓으로 test('데이터 불일치', () => { expect(userB.name).not.toBe('ITDa..
-
단위 테스트 - Jest Globals테스트/단위 테스트 (Vue) 2021. 9. 3. 04:09
단위 테스트 - Jest Globals /*example.test.js*/ import { double } from './example' // describe(테스트 그룹의 이름, 콜백 - test()) describe('그룹1', () => { // 그룹 안에 있는 모든 테스트가 시작하기 전에 단 1번만 실행 beforeAll(() => { console.log('beforeAll') }) // 그룹 안에 있는 모든 테스트가 끝난 다음에 단 1번만 실행 afterAll(() => { console.log('agterAll') }) // 그룹 안에 있는 각각의 테스트가 시작하기 전에 실행 beforeEach(() => { console.log('beforeEach') }) // 그룹 안에 있는 각각의 테..
-
단위 테스트 - 테스트 환경 구성테스트/단위 테스트 (Vue) 2021. 9. 1. 16:35
최종적으로 Vue 영화 검색 프로젝트를 테스트 진행할 예정 1. 패키지 설치 - npm i -D jest @vue/test-utils@next vue-jest@next babel-jest 2. 단위 테스트 도구(jest)가 동작할 수 있도록 구성 옵션 파일 추가 - /jest.config.js 생성 module.exports = { // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록 // 일반적으로 많이 사용되는 모듈의 확장자를 지정 moduleFileExtensions: [ 'js', 'vue' ], // `~` 같은 경로 별칭을 매핑 // `` 토큰을 사용해 루트 경로를 참조할 수 있다 // E.g. `import HelloWorld from '~/components/HelloWo..
-
Vue 프로젝트 로컬 및 서버의 환경 변수 구성프로젝트/영화 검색 (Vue) 2021. 8. 29. 10:53
Vue 프로젝트 로컬 및 서버의 환경 변수 구성 1. npm i -D dotenv-webpack 설치 2. /webpack.config.js 수정 ... const Dotenv = require('dotenv-webpack') module.exports = { ... plugins: [ ... new Dotenv() ], ... 3. /.env 생성 OMDB_API_KEY = ... 4. /functions/movie.js 수정 const axios = require('axios') const { OMDB_API_KEY } = process.env ...