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)

코드 작성 Header.test.js

import {shallowMount} from '@vue/test-utils'
import router from '~/routes/index.js'
import store from '~/store'
import Header from '~/components/Header'

describe('components/Header.vue', () => {

 let wrapper
  // 매번 새로운 테스트 환경에서 실행되도록 설정
  beforeEach(() => {
    // 페이지 이동
    router.push('/movie/tt1234567')
    //await router.

    wrapper = shallowMount(Header, {
      global: {
        plugins: [
          router,
          store
        ]
      }
    })
  })
  

  test('경로 정규표현식이 없는 경우 일치하지 않습니다.', () => {
    
    const regExp = undefined
    expect(wrapper.vm.isMatch(regExp)).toBe(false)
  })

  test('경로 정규표현식과 일치해야 합니다.', () =>{
    const regExp = /^\/movie/
    expect(wrapper.vm.isMatch(regExp)).toBe(123)
  })
})

 

Not implemented: window.scrollTo: window.scrollTo가 준비되지 않았다는 메세지

원인 => index.js

 

코드 수정 Header.test.js

// jest를 이용하여 스크롤 동작하는 것처럼 설정 -> 모의 함수설정

import {shallowMount} from '@vue/test-utils'
import router from '~/routes/index.js'
import store from '~/store'
import Header from '~/components/Header.vue'

describe('components/Header.vue', () => {

 let wrapper
  // 매번 새로운 테스트 환경에서 실행되도록 설정
  beforeEach(async () => {
    // jest를 이용하여 스크롤 동작하는 것처럼 설정
    window.scrollTo = jest.fn()
    // 페이지 이동
    router.push('/movie/tt1234567')
    await router.isReady()

    wrapper = shallowMount(Header, {
      global: {
        plugins: [
          router,
          store
        ]
      }
    })
  })
  

  test('경로 정규표현식이 없는 경우 일치하지 않습니다.', () => {
    
    const regExp = undefined
    expect(wrapper.vm.isMatch(regExp)).toBe(false)
  })

  test('경로 정규표현식과 일치해야 합니다.', () =>{
    const regExp = /^\/movie/
    expect(wrapper.vm.isMatch(regExp)).toBe(123)
  })
})

 

정상적으로 true 값이 나오는것을 확인