Vue TDD - 번외1 (Test Double)

목차

• Introduction
• What is Test Double
• Stub
• Spy
• Mock
• Conclusion
• Reference

📌Introduction

이번편은TDD를 하기위해 test double이라는 것에 대해 부가적으로 알아보는 포스팅입니다.

📌What is Test Double?

테스트 더블이란 실제 객체를 대신해서 테스팅에서 사용하는 모든 방법을 말합니다. 예를 들어 보겠습니다.

다음과 같은 실제 api 통신을 하는 함수가 있다고 가정해봅시다.

asnyc function getTodos() {

    await axios.get('jsonplace-holder/todos');

}

getTodos를 테스팅하려면 실제 네트워크 api를 사용하게 됩니다. 이것은 네트워크 연결 상태에 영향을 받을 것이고 항상 같은 조건에서 테스팅되어야 한다는 조건을 위반하게 됩니다. 따라서 실제 객체를 사용하기 어렵고 모호할때 대신해줄 객체를 만들어 테스트를 돕습니다.(이것이 테스트 더블...!😎)

테스트 더블에는 5가지 종류가 있습니다.

1. Dummy
2. Fake
3. Stub
4. Spy
5. Mock

각각의 종류에 대해 살펴보고 어떻게 Vue 테스팅에 적용이 되는지(주로 Vuex를 다룸) 알아보도록 하겠습니다.
이중 stub, spy, mock에 대해서 설명해보도록 하겠습니다.(Vue testing을 할때 dummy 와 fake를 사용해본적이 없기때문...)

📌1. Stub

Stub는 실제로는 동작하지 않지만, 동작하는 것처럼 보이기 위해 준비된 값만을 반환하는 객체입니다.

주로 stub를 사용할때는 외부라이브러리를 사용할때 많이 쓰게됩니다. 일단 nanoid를 stub하는 예제를 보여드리겠습니다.

import { nanoid } from 'nanoid';

jest.mock('nanoid');

let value = 0;
nanoid.mockImplementation(() => {
  const result = String((value += 1));
  return result;
});

beforeEach(() => {
  value = 0;
})

실제 nanoid는 12sdfmk1231000wdm과 같은 알기 힘든 id값을 return하게 됩니다. 만약 todo를 생성할때 마다 이 값이 nanoid가 붙는다면... 이부분은 어떻게 테스팅이 되어야할까요?

정답은 stub를 사용하는 것입니다!

위에 예제에선 nanoid가 각 test마다 순서대로 '1', '2'....를 순차적으로 return하게 됩니다. 실제로 동작하진 않지만 제가 준비한 value값 만을 리턴하게 되는 예제입니다.

📌2. Spy

Spy는 호출등 일부 정보를 기록해 다양한 상황을 감시하는 객체입니다.

주로 jest를 사용할때는 jest.fn 혹은 jest.spyOn을 사용합니다.(Vue공식 문서에 나와 있는 sinon도 있긴 하지만 다루지는 않겠음)

다음 예제를 보겠습니다.

 describe('CHANGE_COUNT_VALUE test', () => {
    it('change count value by 10', () => {
      const commit = jest.fn();
      CHANGE_COUNT_VALUE({ commit }, 10);
      expect(commit).toHaveBeenCalledWith('SET_COUNT_VALUE', 10);
    });
  });

Vuex에 Actions를 테스팅하는 내용입니다. 여기서 const commit = jest.fn()을 주목해주세요.
jest.fn은 원래 모의 함수를 만들기 위한 함수 입니다.(jest 공식문서 참고) 하지만 이 모의 함수는 기본적으로 호출이 감시가 되기 때문에 사용하기도 합니다.(jest.spyOn을 사용해도 상관은 없습니다).

주로 Actions를 테스팅을 할땐 commit을 관찰을 합니다. 어떤 mutations가 호출이 되었고 어떤 값을 넘겨주는지에 관해 테스팅을 하게됩니다. 그래서 commit을 jest.fn()을 사용하여 spy를 하는 것 입니다.

📌3. Mock

Mock은 실제로 동작하지만 준비된 값만을 반환하는 객체입니다.

다음 예제를 보겠습니다.

import { fetchData } from '@/api/todo-service';
jest.mock('@/api/todo-service');

const { FETCH_ITEMS } = actions;

describe('Action test', () => {
    describe('Async actions test', () => {
          describe('Fetch items test', () => {
            it('get items from mock', async () => {
              fetchData.mockResolvedValue(mockItems);
              const commit = jest.fn();
              await FETCH_ITEMS({ commit });
              expect(commit).toHaveBeenCalledWith('SET_ITEMS', mockItems.data);
            });
          });
});

fetchData는 json-placehoder에서 todos를 불러오는 api-call을 하는 함수입니다. 그래서 실제로 api-call을 하는 것이 아닌 jest.mock('@/api/todo-service');을 해줍니다. 그리고 fetchData가 실제로 반환하는 값이 무엇인지를 결정하는것은 fetchData.mockResolvedValue(mockItems);에 써주게 됩니다. 이렇게 하면 실제로는 fetchData는 api-call을 해서 data를 불러오게 되지만 testing에서는 무조건 mockItems를 반환하게 됩니다. 이렇게 jest.mock을 사용하여 간단하게 mock을 해줄 수 있습니다.

📌Conclusion

사실 이렇게 테스팅을 하면서 정확한 용어와 그에 따른 설명들을 깊게 공부할 필요는 없다고 생각합니다. 실제로 vue test code를 작성하다보면 '이걸 도대체 어떻게 테스팅 하지..?" 하는 부분들이 있는데 그부분들을 어떻게 해결을 할까를 고민하다보면 자연스레 익혀지는 내용들이라고 생각합니다. 저도 테스트 더블이라는 것을 처음 접하게 된건 testing을 공부하고도 한참 뒤에 일이었습니다. 아... 이걸 테스트 더블이라고 부르는 거구나.. 이걸 이런식으로 부르는구나 정도로만 알고 있었던거 같습니다. 그러니 이글이 너무 진부하다고 느끼지 않으셨으면 좋겠다는 생각을... 하면서 글을 마칩니다.

📌 Reference

• jest 공식문서
• jest와 vue test utils로 vue컴포넌트 단위 테스트
• 브런치글