공부 정리 공부 정리

테스트/단위 테스트 (Vue)

• 단위 테스트 - Movie 스토어

  테스트/단위 테스트 (Vue) 2021. 9. 10. 02:37

  단위 테스트 - Movie 스토어 Movie.js /* 영화 검색과 관련된 데이터를 취급하는 용도 */ import axios from 'axios' import _uniqBy from 'lodash/uniqBy' const _defaultMessage = 'Search for the movie title!' export default { namespaced: true, state: () => ({ movies: [], message: _defaultMessage, loading: false, theMovie: {} }), getters: {}, mutations: { updateState(state, payload) { Object.keys(payload).forEach(key => { state[ke..

  Read More
• 단위 테스트 - Movie 컴포넌트

  테스트/단위 테스트 (Vue) 2021. 9. 9. 10:22

  단위 테스트 - Movie 컴포넌트 Movie.vue ... ... Movie.test.js import { shallowMount } from '@vue/test-utils' import store from '~/store' import router from '~/routes' import loadImage from '~/plugins/loadImage' import Movie from '~/routes/Movie' describe('routes/Movie.vue', () => { let wrapper beforeEach(async () => { window.scrollTo = jest.fn() // 영화 상세 페이지 이동 router.push('/movie/tt1234567') // 페이지 완료까지 ..

  Read More
• 단위 테스트 - Search 컴포넌트

  테스트/단위 테스트 (Vue) 2021. 9. 8. 01:10

  단위 테스트 - Search 컴포넌트 Search.vue All Years {{ item }} Apply ... Search.test.js import { shallowMount } from '@vue/test-utils' import Search from '~/components/Search' describe('components/Sarch.vue', () => { let wrapper beforeEach(() => { wrapper = shallowMount(Search) }) test('선택 가능한 연도의 개수가 일치합니다', () => { const year = wrapper.vm.filters.find(f => f.name === 'year') // 2021 - 1985 + 1 = 37 cons..

  Read More
• 단위 테스트 - Header 컴포넌트

  테스트/단위 테스트 (Vue) 2021. 9. 7. 16:27

  단위 테스트 - Header 컴포넌트 Header.vue {{ nav.name }} ... Header.test.js import { shallowMount } from '@vue/test-utils' import router from '~/routes' import store from '~/store' import Header from '~/components/Header' describe('components/Header.vue', () => { let wrapper // 각각의 테스트가 동작하기 직전에 실행 beforeEach(async () => { // window.scrollTo를 모의 함수로 동작하는 것처럼 구성 window.scrollTo = jest.fn() // 페이지 이동 router..

  Read More
• 단위 테스트 - mount 와 shallowMount

  테스트/단위 테스트 (Vue) 2021. 9. 7. 03:04

  단위 테스트 - mount 와 shallowMount Parent.vue Parent Child.vue Child: {{ msg }} Parent.test.js /* import { mount } from '@vue/test-utils' import Parent from './Parent' test('Mount', () => { const wrapper = mount(Parent) // Received: "Parent Child: ITBlue" expect(wrapper.html()).toBe('') }) */ import { shallowMount } from '@vue/test-utils' import Parent from './Parent' test('Mount', () => { // shallow..

  Read More
• 단위 테스트 - 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..

  Read More
• 단위 테스트 - 모의(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, '..

  Read More
• 단위 테스트 - 비동기 테스트

  테스트/단위 테스트 (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..

  Read More