Nuxt.js + Typescript + JEST 조합에서 Vuex(Store) 사용하기

https://gmyankee.tistory.com/334

Nuxt.js + Typescript + Vuetify.js + Jest 설정하기

지난번에 위 링크처럼 Nuxt.js + Typescript + Vuetify.js + JEST.js 의 조합으로 Unit Test 환경을 구축하였지만,

Vuex를 적용하는 내용이 빠져서 추가로 작성을 해보고자 합니다.

 

 

 

 

 

 

 

Vuex는 Typescript를 조합하면 대체로 많은 외국 게시글들은 Typescript Class based를 통한 개발을 진행합니다.

하지만 Nuxt 특성상 모듈화로 진행을 하는데 굳이 Vuex까지 Class based로 개발을 해야하나..? 배보다 배꼽이 더 큰 것 같습니다. 왜냐하면 저는 Composition API 방식을 더 선호하는 것도 없잖아 있지만 Class Based로 만들면 손도 마니가는 느낌이라... 개개인의 차이인것 같지만 러닝커브는 확실히 Vanila보다 Class가 훨씬 높다고 느껴지긴 합니다.

Techlog는 왜 Class based로 한 것인가...

 

 

import { mount } from '@vue/test-utils'
// @ts-ignore
import LoginButton from '@/components/AppHeader/LoginButton.vue'

describe('LoginButton', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(LoginButton)
    expect(wrapper.vm).toBeTruthy()
  })
})

 

대충 이렇게 생긴 LoginButton이라는 컴포넌트에 대한 JEST 테스트가 있다면, ATOMIC Design Pattern에서 이친구는 Atom에 해당하는 주체라 별다른 기능없이 UI만을 표기 하는 친구입니다.

때문에 Vuex가 딱히 필요 없죠, 개발자 마다 다르겠지만, 저의 컴포넌트에서는 사용되지 않습니다.

 

 

 

import { mount, createLocalVue } from '@vue/test-utils'
// @ts-ignore
import Sign from '@/components/AppHeader/Sign.vue'


describe('Sign', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Sign, {
    	localVue
    })
    expect(wrapper.vm).toBeTruthy()
  })
})

하지만 Sign이라는 컴포넌트는 Molecule에 해당하는 녀석이기에 Atom으로 구성된 LoginButton을 포함합니다.

여기선 Store를 통해 User를 구분하는 역할이라 vuex가 절실합니다.

 

 

 

 

 

import { mount, createLocalVue } from '@vue/test-utils'
// @ts-ignore
import Sign from '@/components/AppHeader/Sign.vue'
import Vuex from 'vuex'


describe('Sign', () => {
  const localVue = createLocalVue()
  let vuetify: any
  let store: any

  localVue.use(Vuex)

  beforeEach(() => {
    vuetify = new Vuetify()
    store = new Vuex.Store({
      state: {
        authenticated: false,
      },
      getters: {
        authenticated: (state) => state.authenticated,
      },
    })
  })
  
  test('is a Vue instance', () => {
    const wrapper = mount(Sign, {
      localVue,
      vuetify,
      store,
    })
    expect(wrapper.vm).toBeTruthy()
  })
})

 

beforeEach()에서 Vuex를 mocking한 데이터를 호출하여 사용할 수 있습니다.

이상하게 저는 저게 계속 getters 오류가 나서 어차피 getters는 computed로 가는것이라 다음과 같이 수정하여 해결하였습니다.

 

 

 

import { mount, createLocalVue } from '@vue/test-utils'
// @ts-ignore
import Sign from '@/components/AppHeader/Sign.vue'


describe('Sign', () => {
  const localVue = createLocalVue()
  let vuetify: any

  beforeEach(() => {
    vuetify = new Vuetify()
  })
  
  test('is a Vue instance', () => {
    const wrapper = mount(Sign, {
      localVue,
      vuetify,
      computed: {
      	authenticated: () => false
      }
    })
    expect(wrapper.vm).toBeTruthy()
  })
})

 

이렇게 했을때 얼마나 우려먹을 수 있을지는 모르겠네요...