Testing 트러블슈팅 가이드 완벽 정리

테스트 작성 시 자주 발생하는 문제와 해결 방법을 담은 실전 가이드입니다. 비동기 처리, Mock 설정, 환경 설정 등 실무에서 바로 적용할 수 있는 트러블슈팅 팁을 제공합니다.

---

---

들어가며

이 글에서는 Testing 트러블슈팅 가이드 완벽 정리에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 비동기_테스트_타임아웃_에러
2. Mock_함수_초기화_안됨
3. DOM_요소를_찾을_수_없음
4. 환경변수_로딩_실패
5. 모듈_Mock이_작동하지_않음
6. Timer_함수_테스트_실패
7. State_업데이트가_반영_안됨
8. API_호출_테스트_중_실제_요청_발생
9. 스냅샷_테스트_계속_실패
10. 테스트_간_데이터베이스_상태_충돌
11. 콘솔_에러_경고_메시지_정리
12. Coverage_리포트가_부정확함

---

1. 비동기 테스트 타임아웃 에러

개요

비동기 작업이 완료되기 전에 테스트가 종료되어 발생하는 타임아웃 에러를 해결하는 방법입니다.

코드 예제

// ❌ 잘못된 방법
test('fetch data', () => {
  fetchUser().then(user => {
    expect(user.name).toBe('John');
  });
});

// ✅ 올바른 방법
test('fetch data', async () => {
  const user = await fetchUser();
  expect(user.name).toBe('John');
});

설명

async/await를 사용하거나 Promise를 return하여 테스트가 비동기 작업을 기다리도록 해야 합니다.

---

2. Mock 함수 초기화 안됨

개요

이전 테스트의 Mock 상태가 남아있어 다음 테스트에 영향을 주는 문제를 해결합니다.

코드 예제

const mockFn = jest.fn();

beforeEach(() => {
  mockFn.mockClear(); // 호출 기록 초기화
});

test('calls mock once', () => {
  mockFn('test');
  expect(mockFn).toHaveBeenCalledTimes(1);
});

설명

beforeEach에서 mockClear()를 사용해 각 테스트마다 Mock 상태를 초기화합니다.

---

3. DOM 요소를 찾을 수 없음

개요

React Testing Library에서 요소가 즉시 렌더링되지 않아 발생하는 에러를 해결합니다.

코드 예제

import { render, screen, waitFor } from '@testing-library/react';

test('finds async element', async () => {
  render(<AsyncComponent />);

  const element = await screen.findByText('Loaded');
  expect(element).toBeInTheDocument();
});

설명

findBy 쿼리를 사용하면 요소가 나타날 때까지 자동으로 기다립니다.

---

4. 환경변수 로딩 실패

개요

테스트 환경에서 환경변수가 제대로 로드되지 않는 문제를 해결합니다.

코드 예제

// jest.config.js
module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js']
};

// jest.setup.js
process.env.API_URL = 'http://test-api.com';
process.env.NODE_ENV = 'test';

설명

jest.setup.js 파일에서 환경변수를 설정하여 모든 테스트에서 사용할 수 있습니다.

---

5. 모듈 Mock이 작동하지 않음

개요

ES6 모듈을 Mock할 때 자주 발생하는 문제와 올바른 Mock 방법입니다.

코드 예제

// api.js를 Mock
jest.mock('./api', () => ({
  fetchUser: jest.fn(() =>
    Promise.resolve({ name: 'Test User' })
  )
}));

import { fetchUser } from './api';

test('mocked api call', async () => {
  const user = await fetchUser();
  expect(user.name).toBe('Test User');
});

설명

jest.mock을 import 전에 호이스팅하여 모듈 전체를 Mock합니다.

---

6. Timer 함수 테스트 실패

개요

setTimeout, setInterval 등 타이머 함수를 사용하는 코드를 빠르게 테스트합니다.

코드 예제

jest.useFakeTimers();

test('executes after timeout', () => {
  const callback = jest.fn();
  setTimeout(callback, 1000);

  jest.advanceTimersByTime(1000);
  expect(callback).toHaveBeenCalled();
});

설명

useFakeTimers()로 타이머를 Mock하고 advanceTimersByTime()으로 시간을 건너뜁니다.

---

7. State 업데이트가 반영 안됨

개요

React 컴포넌트의 상태 변경 후 바로 테스트하면 실패하는 문제를 해결합니다.

코드 예제

import { render, screen, fireEvent, waitFor } from '@testing-library/react';

test('updates state', async () => {
  render(<Counter />);
  const button = screen.getByText('Increment');

  fireEvent.click(button);
  await waitFor(() => {
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

설명

waitFor를 사용해 상태 업데이트와 리렌더링이 완료될 때까지 기다립니다.

---

8. API 호출 테스트 중 실제 요청 발생

개요

실제 API가 호출되지 않도록 axios나 fetch를 Mock하는 방법입니다.

코드 예제

import axios from 'axios';
jest.mock('axios');

test('fetches data without real API call', async () => {
  const mockData = { id: 1, name: 'Test' };
  axios.get.mockResolvedValue({ data: mockData });

  const result = await fetchData();
  expect(result).toEqual(mockData);
});

설명

axios 전체를 Mock하고 mockResolvedValue로 반환값을 지정합니다.

---

9. 스냅샷 테스트 계속 실패

개요

날짜, 랜덤값 등 동적인 값 때문에 스냅샷이 계속 바뀌는 문제를 해결합니다.

코드 예제

test('snapshot with dynamic values', () => {
  const component = render(<UserCard />);

  expect(component.asFragment()).toMatchSnapshot({
    createdAt: expect.any(Date),
    id: expect.any(String)
  });
});

설명

동적인 값은 expect.any()를 사용해 타입만 검증하도록 합니다.

---

10. 테스트 간 데이터베이스 상태 충돌

개요

각 테스트마다 깨끗한 데이터베이스 상태를 보장하는 방법입니다.

코드 예제

beforeEach(async () => {
  await database.clear();
  await database.seed({
    users: [{ id: 1, name: 'Test User' }]
  });
});

afterAll(async () => {
  await database.disconnect();
});

설명

beforeEach에서 DB를 초기화하고 필요한 데이터를 세팅합니다.

---

11. 콘솔 에러 경고 메시지 정리

개요

테스트 실행 중 불필요한 콘솔 메시지를 제거하여 가독성을 높입니다.

코드 예제

beforeAll(() => {
  jest.spyOn(console, 'error').mockImplementation(() => {});
  jest.spyOn(console, 'warn').mockImplementation(() => {});
});

afterAll(() => {
  console.error.mockRestore();
  console.warn.mockRestore();
});

설명

console 메서드를 spy하고 mock하여 테스트 출력을 깔끔하게 유지합니다.

---

12. Coverage 리포트가 부정확함

개요

테스트 커버리지가 실제와 다르게 표시되는 문제를 해결합니다.

코드 예제

// jest.config.js
module.exports = {
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.test.{js,jsx,ts,tsx}',
    '!src/index.js',
    '!src/reportWebVitals.js'
  ],
  coverageThreshold: {
    global: { branches: 70, functions: 70, lines: 70 }
  }
};

설명

collectCoverageFrom으로 측정할 파일을 정확히 지정하고 테스트 파일은 제외합니다.

---

마치며

이번 글에서는 Testing 트러블슈팅 가이드 완벽 정리에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Testing #Jest #Mock #AsyncTest #Debugging