Vue TDD - 번외2 (mixins tesing)

📌 목차

• 00.Introduction
• 01.Mixin Test하기
• 02.Conclusion

📌 00.Introduction

이번 포스팅은 mixins의 테스트 방법에 대해 다룹니당. 🎉 mixins는 그렇게 어렵지 않아요.(컴포넌트 테스트와 비슷하게 합니다.) 이번 포스팅에서는 어떻게 mixins를 테스팅하는지에 대해 알아보겠습니다. mixins는 counter example로 진행합니다. 해당 코드는 여기에서 보실수 있습니다.

📌 01.Mixin Test하기

이번 포스팅은 이해를 돕기 위해 먼저 counter mixins 코드를 짜보고 그뒤에 테스트 코드를 작성하겠습니다. 해당 코드는 이렇게 됩니다.

// CounterMixins.js
export default {
  data: () => ({
    count: 0
  }),
  methods: {
      increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  },
}

이번에는 테스트 코드를 작성해보겠습니다.

import { shallowMount } from '@vue/test-utils';
import CounterMixins from '../../src/mixins/CounterMixins';

describe('CounterMixins test', () => {
  // Initialize - 새로운 컴포넌트 만들기(mixins를 추가하여)
  const Component = {
    render() {},
    mixins: [CounterMixins],
  };
  const wrapper = shallowMount(Component);
  const { vm } = wrapper;
  describe('data test', () => {
    it('data.count should be 0', () => {
      expect(vm.count).toBe(0);
    });
  });

  describe('method test', () => {
    beforeEach(() => {
      vm.count = 0;
    });

    describe('increment test', () => {
      it('increment once', () => {
        vm.increment();
        expect(vm.count).toBe(1);
      });
    });

    describe('decrement test', () => {
      it('decrement once', () => {
        vm.decrement();
        expect(vm.count).toBe(-1);
      });
    });
  });
});

컴포넌트 테스팅을 할때 처럼 shallowMount를 사용합니다. 다른 점은 새로운 컴포넌트를 만들어서 mixins를 넣는 것입니다. 그뒤에는 컴포넌트 테스팅과 동일합니다.

📌 02.Conclusion

Mixins테스팅은 그렇게 복잡하진 않습니다. 다만 일반적인 컴포넌트 테스팅과 다른점은 컴포넌트에 끼워지는 mixins처럼 새로운 컴포넌트를 생성하여 만들어 주는 점이 다릅니다. 그럼 다음 포스팅을 기대해주세요~~!🙇