반응형 jest13 🔗 vuex jest 사용 📘 vuex 사용화면 vuex내용은 간단하다. Promise 객체를 통해 사용자 정보를 세팅하는 과정이다. // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { userInfo: { name: '', age: 0 } }, mutations: { setUserInfo(state, payload) { state.userInfo = payload } }, getters: { getUserInfo(state) { return state.userInfo } }, actions: { apiSetUserInfo({ commit }) { new Promise((r.. 2024. 3. 31. 🦫 카카오주소 테스트 코드 💿 카카오 주소 화면 세팅 테스트 사항은 간단하다. 주소 팝업 호출여부를 확인한다 주소 검색을 성공 후 값을 세팅한다 주소 검색 버튼 {{ address }} ⏰ 카카오 주소 테스트 코드 주소 팝업 호출 여부 확인 PostCode객체와 open을 가짜로 구현하고, 테스트 작성시에는 open을 감시할 수 있도록 spyOn으로 감시한다. 그리고 버튼을 눌렀을때 PostCode에서 open 호출 여부를 확인한다. import { shallowMount } from '@vue/test-utils' import postcodeView from '@/views/mainLayout/postcodeView.vue' function Postcode(callback) { this.callback = callback } P.. 2024. 3. 14. 🍟 jest 에서 setTimeOut,setInterVal을 사용하기 🥗 setTimeOut 개발을 하는 도중 setTimeOut을 만나게 되었고,이것을 어떻게 테스트 할 것인가에 대한 고민이 있었다. jest 문서를 보는 도중 jest.useFakeTimers 를 발견하였다. 아래는 vue 소스이다. 5초후 count값이 1이되었는지 확인이 필요하다. {{ count }} 아래는 테스트 코드이다. jest.useFakeTimers 를 통해 timer함수를 다 mock으로 바꿔준다. jest.advanceTimersByTime(n) 를 통해 n 초 후 빨리감기로 이동한다. afterEach에서 jest.clearAllTimers를 통해 clear 한다 import { shallowMount } from '@vue/test-utils' import timeOut from '.. 2024. 2. 27. 🌮 부모컴퍼넌트에 Video 태그가 있는 경우의 단위테스트 🍟 컴퍼넌트 구조 videoTestView에서 재생버튼을 누르면, mainLayout.vue에서 Video태그를 호출한다. 이렇게 관리되는 이유는 Video태그가 다른 화면에서 관리되기 때문인데, 이렇게 구조를 만들면, videoTestView에서 단위테스트 실시할 경우, mainLayout을 가져올 수 없기 때문에 에러가 발생한다. 단위테스트 실시하는 경우 videoTestView에서 재생버튼을 호출하면, video 태그가 존재하지 않기 때문에 오류가 발생한다. 그리하여, createElement를 이용하여, video를 생성하고, video객체를 세팅해준다. import { shallowMount, createLocalVue } from "@vue/test-utils"; import Plugins f.. 2024. 1. 22. 이전 1 2 3 4 다음 반응형
