본문 바로가기

프론트엔드235

Movie 컴포넌트 테스트 Movie.vue 테스트 영화정보 id를 제대로 가져오는지 확인 테스트 코드 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') await router.isReady() wrapper = shallo.. 2022. 2. 1.
Search 컴포넌트 테스트 연도별 조회기능 테스트 기존기능 코드 (Search.vue) test 코드 작성 Search.test.js import {shallowMount} from '@vue/test-utils' import Search from '~/components/Search' describe('components/Search.vue', () => { let wrapper beforeEach(() => { wrapper = shallowMount(Search) }) test('선택 가능한 연도의 개수가 일치합니다.', () => { const year = wrapper.vm.filters.find((filter) => { return filter.name === 'year' }) const yearLaength = new.. 2022. 1. 31.
Header 컴포넌트 테스트, url 테스트 각각의 테스트는 고유한 테스트 환경을 갖추어야 한다. 따라서 테스트 안에서 매번 마운트 해주는 방법이 있다. 또는 beforEach를 이용하여 테스트 전에 마운트를 다시 한번 해주는 방법이 있다. 아래 예제에서는 beforEach를 이용하는 방법을 사용하였다. 페이지 이동을 위한 공식문서 Testing Vue Router | Vue Test Utils for Vue 3 (2.0.0-rc.18) (vuejs.org) Testing Vue Router | Vue Test Utils for Vue 3 (2.0.0-rc.18) Testing Vue Router This article will present two ways to test an application using Vue Router: Using the.. 2022. 1. 27.
mount vs shallowMount 단위 테스트는 최대한 가볍게 진행해야 하므로 얕은 마운트를 의미하는 shallowmount를 사용하기를 권장한다. Parent.vue Parent Child.vue Child: {{ msg }} Parent.test.js import {mount} from '@vue/test-utils' import {shallowMount} from '@vue/test-utils' import Parent from './Parent' test('Mount', () => { const wrapper = mount(Parent) expect(wrapper.html()).toBe('') }) test('shallowMount', () => { const wrapper = shallowMount(Parent) expect(w.. 2022. 1. 24.
VTU API 공식 문서 사이트 API Reference | Vue Test Utils for Vue 3 (2.0.0-rc.18) (vuejs.org) API Reference | Vue Test Utils for Vue 3 (2.0.0-rc.18) API Reference mount Creates a Wrapper that contains the mounted and rendered Vue component to test. Signature: interface MountingOptions { attachTo?: HTMLElement | string attrs?: Record data?: () => {} extends Data ? any : Data extends object ? Partial : a next.vue-test-utils.. 2022. 1. 23.
VTU 첫 테스트 및 에러 해결(버전 문제) 공식문서 Getting Started | Vue Test Utils for Vue 3 (2.0.0-rc.18) (vuejs.org) Getting Started | Vue Test Utils for Vue 3 (2.0.0-rc.18) Getting Started Welcome to Vue Test Utils, the official testing utility library for Vue.js! This is the documentation for Vue Test Utils v2, which targets Vue 3. In short: What is Vue Test Utils? Vue Test Utils (VTU) is a set of utility functions aimed to next.vue-te.. 2022. 1. 21.