📖 ToDo List를 Jest로 테스트 해보기-03_Jest test code 돌려보자

ToDo List vue3

git : https://github.com/sum529-create/vue3-crud

간단한 CRUD 기능의 ToDo-List를 만들었다!
테스트 목적인지라 UI중점적이 아니라.. 마음엔 안들지만 어쨌든!

일단 Composable에 훅으로 빼놓은 useTodo.js를 보자!

src/composable/useTodo.js

import { onMounted, ref } from 'vue';

function useTodo(){
  const itemList = ref([]);
  const selectedItem = ref({});
  
  function fetchList(){
    const result = [];
    for(let i=0; i<localStorage.length; i++){
      const key = localStorage.key(i);
      const todoItem = localStorage.getItem(key);
      
      try {
        const parsedItem = JSON.parse(todoItem);
        result.push(parsedItem); // 객체로 변환하여 배열에 추가
      } catch (error) {
        console.error("Invalid JSON format for key:", key, todoItem);
      }
    }
    itemList.value = result;
  }
  function newItem(item){
    const idx = crypto.randomUUID();
    const newItemAbout = {
      idx: idx,
      content: item,
      completed: false,
    }
    localStorage.setItem(idx, JSON.stringify(newItemAbout));
    itemList.value.push(newItemAbout);
  }
  function removeTodo(item, i){
    itemList.value.splice(i, 1);
    localStorage.removeItem(item.idx);
  }
  function modifyTodo(item){
    // Object.assign(selectedItem.value, item);
    selectedItem.value = {...item};
  }
  function toggleCompleted(item){
    localStorage.setItem(item.idx, JSON.stringify(item));
  }
  function changeTodo(item){
    const index = itemList.value.findIndex(e => e.idx === item.idx);
    if(index !== -1){
      itemList.value[index] = {...item};
      localStorage.setItem(item.idx, JSON.stringify(item))
    }
    
  }
  function onCancelTodo(){
    selectedItem.value = '';
  }
  onMounted(() => {
    fetchList();
  })
  return { newItem, itemList, removeTodo, modifyTodo, selectedItem, toggleCompleted, changeTodo, onCancelTodo }
}

export default useTodo;

테스트 파일 생성

우선 테스트 파일을 생성해보자

useTodo.test.js

src/composable/__tests__/useTodo.test.js라는 파일을 생성합니다.
테스트 파일 이름은 보통 파일명.test.js 형식으로 짓습니다.

import { nextTick } from 'vue';
import useTodo from '../useTodo';


describe('useTodo composable', () => {
  let todo;

  beforeEach(() => {
    // 초기화
    localStorage.clear();
    todo = useTodo();
  });

  test('초기 로드: fetchList()', async () => {
    // Arrange: 로컬 스토리지에 항목 추가
    const mockItem = { idx: '1', content: 'Test Todo', completed: false };
    localStorage.setItem('1', JSON.stringify(mockItem));

    // Act: fetchList 호출
    todo.fetchList();

    // Assert: itemList가 로드되었는지 확인
    expect(todo.itemList.value).toEqual([mockItem]);
  });

  test('새로운 할 일 추가: newItem()', async () => {
    // Act: 새로운 할 일을 추가
    todo.newItem('New Todo');

    // Assert: itemList에 항목이 추가되었는지 확인
    expect(todo.itemList.value.length).toBe(1);
    expect(todo.itemList.value[0].content).toBe('New Todo');
  });

  test('할 일 삭제: removeTodo()', () => {
    // Arrange: 초기 데이터 추가
    const mockItem = { idx: '1', content: 'Delete Me', completed: false };
    todo.itemList.value.push(mockItem);
    localStorage.setItem('1', JSON.stringify(mockItem));

    // Act: 삭제 수행
    todo.removeTodo(mockItem, 0);

    // Assert: itemList와 localStorage에서 삭제되었는지 확인
    expect(todo.itemList.value).toEqual([]);
    expect(localStorage.getItem('1')).toBeNull();
  });

  test('할 일 완료 토글: toggleCompleted()', () => {
    // Arrange: 초기 데이터 추가
    const mockItem = { idx: '1', content: 'Toggle Me', completed: false };
    todo.itemList.value.push(mockItem);
    localStorage.setItem('1', JSON.stringify(mockItem));

    // Act: 완료 상태 토글
    mockItem.completed = true;
    todo.toggleCompleted(mockItem);

    // Assert: localStorage에 업데이트되었는지 확인
    const updatedItem = JSON.parse(localStorage.getItem('1'));
    expect(updatedItem.completed).toBe(true);
  });

  test('할 일 수정: changeTodo()', () => {
    // Arrange: 초기 데이터 추가
    const mockItem = { idx: '1', content: 'Old Content', completed: false };
    todo.itemList.value.push(mockItem);
    localStorage.setItem('1', JSON.stringify(mockItem));

    const updatedItem = { ...mockItem, content: 'Updated Content' };

    // Act: 수정 수행
    todo.changeTodo(updatedItem);

    // Assert: itemList와 localStorage가 업데이트되었는지 확인
    expect(todo.itemList.value[0].content).toBe('Updated Content');
    const storedItem = JSON.parse(localStorage.getItem('1'));
    expect(storedItem.content).toBe('Updated Content');
  });

  test('선택 취소: onCancelTodo()', () => {
    // Arrange: 선택된 항목 추가
    const mockItem = { idx: '1', content: 'Selected', completed: false };
    todo.selectedItem.value = mockItem;

    // Act: 선택 취소
    todo.onCancelTodo();

    // Assert: selectedItem이 초기화되었는지 확인
    expect(todo.selectedItem.value).toBe('');
  });
});

jest 문법으로 작성을 완료 후!

npm run test

테스트 실행!

앗..! localStorage is not defined" 에러발생..

---

문제의 원인

테스트가 실패하는 이유는 Jest가 실행되는 환경에서 localStorage가 기본적으로 제공되지 않기 때문입니다.
localStorage는 브라우저 환경에서만 사용할 수 있는데, Jest는 Node.js 환경에서 실행되므로 localStorage를 지원하지 않습니다.

---

해결 방법

Jest 테스트 환경에서도 localStorage처럼 동작하는 Mock(가짜 구현)을 만들어야 합니다.

---

이제 문제를 해결하기 위한 단계를 차근차근 진행해 보겠습니다.

1. jest.setup.js 파일생성 후 localStorage Mock을 추가

global.localStorage = {
  store: {},
  getItem(key) {
    return this.store[key] || null;
  },
  setItem(key, value) {
    this.store[key] = String(value);
  },
  removeItem(key) {
    delete this.store[key];
  },
  clear() {
    this.store = {};
  },
};

1-1. jest-preset.js에 추가

module.exports = {
  preset: '@vue/vue3-jest',
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.js$': 'babel-jest',
  },
  testEnvironment: 'jest-environment-jsdom',  // 테스트 환경 설정
  setupFilesAfterEnv: ['./jest.setup.js'],
};

2. Mock이 제대로 동작하는지 테스트

.... 여전히 발생. 아마도 Jest가 이 설정을 제대로 읽지 못하거나, localStorage가 테스트 파일에 제대로 적용되지 않는듯 합니다..

3. useTodo.test.js 에 직접 추가

jest.setup.js에 추가된 localStorage Mock이 잘 적용되지 않았다면, 테스트 파일에 직접 Mock을 추가해 보겠습니다.
위 코드를 상단부에 직접 추가!

npm run test

정상적으로 작동하지만.. fetchList()와 crypto를 인식하지 못하는 문제가 발생..!

3-1 TypeError: todo.fetchList is not a function

useTodo.js

function useTodo(){
  	...
	return { newItem, itemList, removeTodo, modifyTodo, selectedItem, toggleCompleted, changeTodo, onCancelTodo, fetchList } 
}
// fetchList를 넣지않아 에러!.. 내부적으로 사용하는거라 추가하지 않아도 된다. 생각했는데.. 테스트시에 필요하다는것을 간과!

3-2 TypeError: crypto.randomUUID is not a function

crypto.randomUUID는 Node.js나 브라우저에서만 사용 가능한 최신 API 중 하나입니다. Jest 테스트 환경인 jest-environment-jsdom은 이 API를 지원하지 않으므로 에러가 발생합니다.

*음.. 그냥 다른것을 써볼까?*

UUID 생성 라이브러리 사용

1) uuid라이브러리 설치:

npm install uuid

2) useTodo.js에서 uuid사용:

import { v4 as uuidv4 } from 'uuid';

...
function useTodo() {
  function newItem(item) {
    const idx = uuidv4(); // crypto.randomUUID 대신 사용
...

얍얍!! 성공! 👍