Vue TDD - Component 편

Table of Content

• 0. Introduction
• 1. Testing Data
• 2. Testing Methods
• 3. Testing Created
• 4. Testing Props
• 5. Testing Computed
• 6. Testing vuex in component
• 7. Conclusion
• Reference

📌 00. Introduction

🚨주의: 해당글은 환경설정을 다루지는 않습니다. 기본적인 cli로 jest를 설정한 파일을 토대로 설명을 합니다.

이 포스팅에는 Vue component를 어떻게 testing을 할까? 에 대한 물음에 답변을 하는 글입니다. 해당 글의 코드는 vue-test-practice에 가시면 됩니다.

이 포스팅에서 다룰 컴포넌트는 하나이며 간단한 Counter를 만들어보는 예제로 설명을 합니다. 그리고 tdd의 가장 중요한 tdd cycle을 준수하여 설명합니다.

MyCounter.vue의 기능:

• count값은 항상 display되어야 한다.(초기 값 0)
• 플러스 버튼을 누르면 count 값이 증가한다.
• 마이너스 버튼을 누르면 count 값이 감소한다.

해당 기능은 실제로 Data와 Method밖에 구현이 안됨으로 추가적으로 created, props, computed는 간단한 예제로 설명하려고 합니다.

📌 01. Testing Data

첫번째로 data값에는 count가 0이 필요합니다. 따라서 이렇게 테스트 코드를 작성해볼 수 있습니다.

//MyCounter.spec.js
import { mount } from '@vue/test-utils';
import MyCounter from '@/components/MyCounter';

describe('MyCounter unit test', () => {
  // mount component
  const wrapper = mount(MyCounter);
  const { vm } = wrapper;

   // 
   describe('MYCOUNTER DATA TEST', () => {
    describe('data count test', () => {
      it('count should be 0', () => {
        expect(vm.count).toBe(0); // data의 count에는 0이 들어있어야 합니다.
      });
    });
  });
}

🚀 깨알지식

mount와 shallow mount의 차이점.

mount는 vue 컴포넌트를 반환합니다. 따라서 props나 trigger click을 지원합니다.
shallow mount는 자식 컴포너는트는 랜더링하지 않는다.

// MyCounter.vue
export default {
  name: 'MyCounter',
  data() {
    return {
      count: 0,
    };
  },
};

📌 02. Testing Methods

counter의 값을 조정하기위해 두개의 함수를 선언할 것입니다.

• onClickIncrease (counter의 값을 1 증가시키는 함수)
• onClickDecrease (counter의 값을 1 감소시키는 함수)

describe('MyCounter unit test', () => {
  // testing methods
  describe('MYCOUNTER METHOD TEST', () => {
    // 매 테스트 전에 count의 값을 0으로 초기화 시킨다.
    beforeEach(() => {
      vm.count = 0;
    });
    // testing increase method
    describe('onClickIncrease test', () => {
      it('increase by 1', () => {
        vm.onClickIncrease(); // count를 증가 시켜본다.
        expect(vm.count).toBe(1);
      });
    });

    // testing decrease method
    describe('onClickDecrease test', () => {
      it('decrease by 1', () => {
        vm.onClickDecrease(); // count를 감소 시켜본다.
        expect(vm.count).toBe(-1);
      });
    });
  });
});

Vue코드는 이렇게 작성해볼 수 있습니다.

export default {
  name: 'MyCounter',
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    onClickIncrease() {
      this.count += 1;
    },
    onClickDecrease() {
      this.count -= 1;
    },
  },
};

📌 03. Testing Created

기능

• created될때 data.testCreated에 'TEST_CREATED'를 세팅해준다.

// testing created
  describe('MYCOUNTER CREATED TEST', () => {
    describe('created test', () => {
      it('testCreated data should be changed blank to TEST_CREATED', () => {
        expect(vm.testCreated).toBe('TEST_CREATED');
      });
    });
  });

export default {
  name: 'MyCounter',
  created() {
    this.testCreated = 'TEST_CREATED';
  },
  data() {
    return {
      testCreated: '',
    };
  },
};

📌 04. Testing Props

먼저 props를 설정하기 위해서는 위에서 설명한 것 처럼 shallow mount가 아닌 mount로 설정을 해줘야 합니다.

import { mount } from '@vue/test-utils';
import MyCounter from '@/components/MyCounter';

describe('MyCounter unit test', () => {
  // mount component
  const wrapper = mount(MyCounter, {
    propsData: {
      testProps: 'TEST_PROPS', // 이렇게 설정을 할 수 있습니다.
    },
  });
  const { vm } = wrapper;

  // testing props
  describe('MYCOUNTER PROPS TEST', () => {
    describe('testProps test', () => {
      it('testProps should be "TEST_PROPS', () => {
        expect(vm.testProps).toBe('TEST_PROPS');
      });
    });
  });
});

export default {
  name: 'MyCounter',
  props: {
    testProps: {
      type: String,
    },
  },
};

📌 05. Testing Computed

기능:

data.tempText('HELLO')를 소문자로 출력하는 computed

describe('MYCOUNTER DATA TEST', () => {
  // testing computed
  describe('MYCOUNTER COMPUTED TEST', () => {
    it('lowercaseTempText test', () => {
      expect(vm.lowercaseTempText).toBe('hello');
    });
  });
});

export default {
  name: 'MyCounter',
  data() {
    return {
      tempText: 'HELLO',
    };
  },
  computed: {
    lowercaseTempText() {
      return this.tempText.toLowerCase();
    },
  },
};

📌 Testing vuex in component

component에서 vuex의 test 시작은 mock에서 부터 출발 합니다. 실제로 로직이 수행이 되는건 따로 vuex에서 테스트 해주세요.

// 먼저 vuex를 불러옵니다.
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import MyCounter2 from '../../src/components/MyCounter2.vue';

// 이렇게 localVue에서 vuex를 사용하게 됩니다.
const localVue = createLocalVue();
localVue.use(Vuex);

describe('MyCounter2 test', () => {
  let store;
  let state;
  let actions;
  let mutations;
  let wrapper;
  let vm;
  beforeEach(() => {
    state = {
      count: 0,
    };
    mutations = {
      ['INCREMENT']: jest.fn(),
      ['DECREMENT']: jest.fn(),
    };
    actions = {
      ['FETCH_ITEMS']: jest.fn(),
    };
    store = new Vuex.Store({
      modules: {
        counter: {
          namespaced: true,
          state,
          mutations,
          actions,
        },
      },
    });
    wrapper = mount(MyCounter2, { store, localVue });
    vm = wrapper.vm;
  });
  it('count mock', async () => {
    expect(vm.count).toBe(0);
  });
  it('mutations mock', () => {
    const incBtn = wrapper.find('#incBtn');
    incBtn.trigger('click');
    expect(mutations.INCREMENT).toHaveBeenCalled();

    const decBtn = wrapper.find('#decBtn');
    decBtn.trigger('click');
    expect(mutations.DECREMENT).toHaveBeenCalled();
  });
  it('actions mock', () => {
    const fetchBtn = wrapper.find('.fetchBtn');
    fetchBtn.trigger('click');
    expect(actions.FETCH_ITEMS).toHaveBeenCalled();
  });
});

📌 Conclusion

뷰의 컴포넌트 테스트는 사실 그렇게 어렵지 않습니다.. 하지만 실무에서 적용하기는 상당히 어렵습니다. 그이유는 각종 라이브러리들과 utils들 때문에 의존성 문제 때문에 test가 어려워집니다. 이문제를 해결하기 위해 최대한 logic을 store로 빼서 logic적인 unit test는 store에서 진행하는 것이 좋습니다. 그렇게 View와 Store를 분리를 하여 View에서는 snapshot 테스트, storybook, 혹은 e2e테스트로 진행하는 것이 좋고 store는 unit으로 테스팅을 하는것이 좋습니다. 그래서 다음 포스팅에서는 store를 테스트 하는 방법을 설명하겠습니다.

Reference

• 뷰 공식문서
• Jest와 Vue Test Utils로 Vue 컴포넌트 단위 테스트
• 카카오테크__바닥부터 시작하는 Vue 컴포넌트 테스트