본문 바로가기

프론트엔드/단위 테스트15

movie 스토어 테스트 store -> movie.js 파일 테스트 관련 공식문서 https://jestjs.io/docs/mock-function-api Mock Functions · Jest Mock functions are also known as "spies", because they let you spy on the behavior of a function that is called indirectly by some other code, rather than only testing the output. You can create a mock function with jest.fn(). If no implementation is given jestjs.io 테스트를 진행할 코드 import axios from 'axio.. 2022. 2. 2.
jest를 이용한 테스트시 콘솔에 내용을 호출하지 않도록 설정 공식 문서 Jest CLI Options · Jest (jestjs.io) Jest CLI Options · Jest The jest command line runner has a number of useful options. You can run jest --help to view all available options. Many of the options shown below can also be used together to run tests exactly the way you want. Every one of Jest's Configuration options c jestjs.io package.json 파일 설정 수정 명령어 추가 "test:unit:silent": "jest --watchAll.. 2022. 2. 1.
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.