Mock

Mock 객체를 사용하는 이유

• 테스트는 실제 실행 환경과 유사할수록 재현성이 높다.

• 하지만 재현성을 높이다보면 실행 시간이 오래 걸리거나 환경 구축이 어려워지는 경우가 있다.

  • 대표적으로 웹 API 데이터를 다뤄야하는 경우 네트워크 오류와같이 제어할 수 없는 부분에서 실패할 수 있음

• 테스트하는 대상은 웹 API 자체가 아닌 응답 데이터에 대한 처리라는것을 명심

• 실제 API 응답값 대신 사용하는 것이 목 객체이다.

• 목 객체를 사용하면 테스트가 어려운 부분을 테스트를 가능하게 하고 더욱 효율적인 테스트가 가능해진다.

목 객체 용어

• stub, spy 등은 목 객체를 상황에 따라 세분화한 객체의 명칭

• 개발 언어에 상관없이 테스트 자동화 관련 문허에서 정의한 용어

Stub

스텁은 주로 대역으로 사용한다. 1) 의존중인 컴포넌트의 대역 2) 정해진 값을 반환하는 용도 3) 테스트 대상에 할당하는 입력값

즉, 테스트 코드에서 실제로 의존하는 데이터나 기능을 대체하는 더미 데이터를 반환하는 역할

• 테스트 대상이 의존중인 컴포넌트에 테스트하기 어려운 부분이 있을 때

• 웹 API에 의존중인 대상을 테스트하는 경우

• "웹 API에서 이런 값을 반환받았을 때는 이렇게 작동해야 한다." 와 같은 테스트에 스텁을 사용한다.

Spy

스파이는 주로 기록하는 용도

1) 함수나 메서드의 호출 기록

2) 호출된 횟수나 실행 시 사용한 인수 기록

3) 테스트 대상의 출력 확인

• 테스트 대상 외부의 출력을 검증할 때 사용한다.

• 인수로 받은 콜백 함수를 검증하는 것

  • 콜백함수가 실행된 횟수

  • 실행 시 사용한 인수

  • 의도한 대로 콜백이 호출됐는지 검증

Jest의 용어 혼란

• 제스트의 API는 xUnit 테스트패턴 의 용어 정의를 충실히 따르지 않는다.

• 제스트는 스텁, 스파이를 구현할 때 jest.mock(목 모듈) 혹은jest.fn, jest.spyOn(목 함수) 라는 API를 사용한다.

• 제스트는 이를 구현한 테스트 대역을 목 객체라고 부르는 등 xUnit 테스트 패턴에서 정의한 용어와는 다른 부분이 많음

• 스텁 혹은 스파이로서 사용하는 명확한 이유가 있을 때를 제외하고는 목 객체라고 부르자.

Jest로 목 모듈을 활용하여 스텁 구현하기

• 단위 테스트나 통합 테스트를 작성할 때 구현이 완성되어 있지 않거나 수정이 필요한 모듈에 의존중인 경우가 있다

• 이때 목 모듈로 대체하면 테스트할 수 없었던 대상을 테스트 가능하게 한다.

export function greet(name: string) {
  return `Hello ${name}.`;
}
export function sayGoodBye(name: string) {
  throw new Error("미구현")
}

import { greet } from './greet';

jest.mock("./greet"); // jest.mock이 테스트 전에 호출되면서 테스트할 모듈을 대체함

test("인사말을 반환하지 않는다(원래 구현과 다르게)", () => {
  expect(greet("woong")).toBe(undefined)
})

모듈을 스텁으로 대체하기

• jest.mock 의 두 번째 인수에는 대체할 함수를 구현할 수 있다.

• 모듈의 일부를 테스트에서 대체하면 의존 중인 모듈의 테스트가 어렵더라도 테스트가 가능하게 만들 수 있다.

import { greet, sayGoodBye } from './greet';

// ./greet 모듈을 모두 대체하게 되어 따로 설정하지 않으면 undefined를 반환하게 된다.
jest.mock("./greet", () => ({
  sayGoodBye: (name: string) => `Good bye, ${name}`,
}))

test("작별 인사를 반환한다(원래 구현과 다르게)", () => {
  const message = `${sayGoodBye("woong")} See you.`;
  expect(message).toBe("Good bye. woong See you.");
})

모듈 일부를 스텁으로 대체하기

• jest.requireActual 함수를 사용하면 원래 모듈의 구현을 import 할 수 있다.

import { greet, sayGoodBye } from './greet';

jest.mock("./greet", () => ({
  ...jest.requireActual('./greet'),
  sayGoodBye: (name: string) => `Good bye, ${name}.`
}))

test("인사말을 반환한다.(원래 구현과 동일하게)", () => {
  expect(greet("woong")).toBe("Hello woong");
})

라이브러리 대체하기

• 수정이 필요한 모듈의 일부를 대체하는 방법

• 실무에서는 라이브러리를 대체할 떄 목 모듈을 가장 많이 사용한다.

// next/router 의존 모듈 대신 next-router-mock 이라는 라이브러리를 적용
jest.mock("next/router", () => require("next-router-mock"));

웹 API 목 객체 기초

• 웹 애플리케이션에서는 웹 API 서버와 통신하여 데이터를 취득하고 갱신하는 작업은 필수

• 테스트할 때는 웹 API 관련 코드를 웹 API 클라이언트의 대역인 스텁으로 대체하여 테스트를 작성한다.

• 스텁이 실제 응답은 아니지만 응답 전후의 관련 코드를 검증할 때 유용하게 사용 가능하다.

• 웹 API 서버가 없으면 API를 호출이 포함된 로직은 테스트가 불가능하다.

  • 해당 API 호출 부분을 스텁으로 대체하면 실제 서버의 응답 여부 상관없이 데이터 취득과 관련된 로직을 테스트할 수 있다.

API 서버는 MSW(Mock Service Worker)로 대체해서 사용하자.

아래 내용들은 그냥 이런게 있구나 하고 ㅌㅌㅌ

import { getMyProfile } from "../fetchers";

export async function getGreet() {
  const data = await getMyProfile();
  if (!data.name) {
    return `Hello, anonymouse user!`;
  }
  return `Hello, ${data.name}!`;
}

웹 API를 클라이언트 스텁 구현

• 타입스크립트와 상성이 좋은 jest.spyOn 을 사용해보자.

import * as Fetchers from "./fetchers";
jest.mock("./fetchers");

// jest.spyOn으로 테스트할 객체를 대체한다. (테스트할 객체 -> Fetchers)
// jest.spyOn(테스트할 객체, 테스트할 함수 이름); 
// *테스트할 대상에 정의되지 않은 함수 이름을 지정하면 타입오류 발생
jest.spyOn(Fetcehrs, "getMyProfile")

데이터 취득 성공을 재현한 테스트

• 데이터 취득이 성공했을 때(resolve) 응답으로 기대하는 객체를 mockResolvedValueOnce 에 지정

• 여기서 지정한 객체도 타입시스템이 적용된 상태이므로 유지보수 수월

test("데이터 취득 성공시: 사용자 이름이 없는 경우", async () => {
  // api가 resolve됐을 때의 값을 재현
  jest.spyOn(Fetchers, "getMyProfile").mockResolvedValueOnce({
    id: "....",
    eamil: "...",
  });
  await expect(getGreet()).resolves.toBe("Hello, anonymouse user!");
})

test("데이터 취득 성공시: 사용자 이름이 있는 경우", async () => {
  // api가 resolve됐을 때의 값을 재현
  jest.spyOn(Fetchers, "getMyProfile").mockResolvedValueOnce({
    id: "....",
    eamil: "...",
    name: "woong",
  });
  await expect(getGreet()).resolves.toBe("Hello, woong!");
})

데이터 취득 실패를 재현한 테스트

export function getMyProfile(): Promise<Profile> {
  return fetch("...").then(async (res) => {
    const data = await res.json();
    if (!res.ok) {
      //200번대 외의 응답인 경우
      throw data;
    }
    return data;
  })
}

// 오류 객체
export const httpError: HttpError = {
  err: { message: "internal server error" },
};

• 오류 객체를 mockRejectedValueOnce 인수로 getMyProfile 함수의 reject를 재현하는 스텁을 구현

test("데이터 취득 실패시", async () => {
  jest.spyOn(Fetchers, "getMyProfile").mockRejectedValueOnce(httpError)
  await expect(getGreet()).rejects.toMatchObject({
    err: {message: "internal server error" },
  })
})

test("데이터 취득 실패시 오류가 발생한 데이터와 함께 예외가 throw된다.", async () => {
  expect.assertions(1);
  jest.spyOn(Fetchers, "getMyProfile").mockRejectedValueOnce(httpError)
  try {
    await getGreet();
  } catch (err) {
    expect(err).toMatchObject(httpError);
  }
})

픽스처

응답을 재현하기 위한 테스트용 데이터를 의미

목 객체 생성 함수

테스트에 필요한 설정을 최대한 적은 매개변수로 교체할 수 있게 만드는 유틸리티 함수

• 테스트할 때마다 jest.spyOn 을 작성하지 않아도 되어 코드가 깔끔해진다.

목 함수를 사용하는 스파이

• 제스트의 목 함수로 스파이를 구현하는 방법

• 스파이는 테스트 대상에 발생한 입출력을 기록하는 객체

• 스파이에 기록된 값을 검증하여 의도한 대로 기능이 작동하는지 테스트할 수 있음

실행됐는지 검증하기

• jest.fn 사용해서 목 함수를 작성

• 작성한 목 함수는 테스트 코드에서 함수로 사용하며 tobeCalled 매처를 사용하면 실행 여부 검증 가능

test("목 함수가 실행됐다.", () => {
  const mockFn = jest.fn();
  mocFn();
  expect(mockFn).toBeCalled();
})

test("목 함수가 실행되지 않았다.", () => {
  const mockFn = jest.fn();
  expect(mockFn).not.toBeCalled();
})

실행 횟수 검증

• 목 함수는 실행 횟수를 기록한다.

• toHaveBeenCalledTimes 매처를 사용하면 함수가 몇 번 호출됐는지 검증

test("목 함수는 실행 횟수를 기록한다", () => {
  const mockFn = jest.fn();
  mockFn();
  expect(mockFn).toHaveBeenCalledTimes(1);
  mockFn();
  expect(mockFn).toHaveBeenCalledTimes(2);
})

실행 시 인수 검증

• 목 함수는 실행 시 인수도 기록

  • toHaveBeenCalledWith 매처를 사용

• 목 함수는 다른 함수 안에 작성할 수도 있다.

test("목 함수는 안에서도 실행할 수 있다.", () => {
  const mockFn = jest.fn();
  function greet() {
    mockFn();
  }
  greet();
  expect(mockFn).toHaveBeenCalledTimes(1);
})

test("목 함수는 실행 시 인수를 기록한다", () => {
  const mockFn = jest.fn();
  function greet(message: string) {
    mockFn(message); // 인수를 받아 실행
  }
  greet("hello"); // "hello"를 인수로 실행된것이 mockFn에 기록된다.
  expect(mockFn).toHaveBeenCalledWith("hello");
})

실행 시 인수가 객체일 때의 검증

• 인수가 문자열 같은 원시형이 아닌 배열이나 객체일 때도 검증이 가능하다.

• expect.objectContaining 라는 보조 함수를 사용하면 객체의 일부만 검증할 수 있다.

  • 객체가 너무 크면 일부만 검증할 수 밖에 없다.

test("expect.objectContaining를 사용한 부분 검증", () => {
  const mockFn = jest.fn();
  checkConfig(mockFn);
  expect(mockFn).toHaveBeenCalledWith(
    expect.objectContaining({
      feature: { spy: true },
    })
  )
})

실무에서는 '폼에 특정 인터렉션이 발생하면 응답으로 받은 값은 OO이다' 같은 테스트를 자주 작성하게 된다.

테스트 준비

• 입력 값을 동적으로 생성할 수 있는 팩토리 함수

function inputFactory(input?: Partial<ArticleInput>) {
  return {
    tags: ["testing"],
    title: "타입스크립트 테스팅 작성법",
    body: "...",
    ...input,
  }
}

const input = inputFactory(); //유효성 검사를 통과하는 객체 반환
const input = inputFactory({title: "", body: ""}); // 유효성 검사에 통과하지 못하는 객체 반환

현재 시각에 의존하는 테스트

• 현재 시각에 의존하는 로직이 테스트 대상에 포함됐다면 테스트 결과가 실행 시각에 의존하게 됨

• 특정 시간대에는 CI의 테스트 자동화가 실패하는 불안정한 테스트가 된다.

• 이때 테스트 실행 환경에 현재 시각을 고정하면 항상 동일한 테스트 결과를 얻을 수 있다.

export function greetByTime() {
  const hour = new Date().getHours();
  if (hour < 12) {
    return "good morning"
  } else if (hour < 18) {
    return "good afternoon",
  } else { 
    return "good evening"
  }
}

현재 시각 고정하기

• 테스트 실행 환경의 현재 시각을 임의의 시각으로 고정하려면 다음과 같은 함수 사용

  • jest.useFakeTimers : 제스트에 가짜 타이머를 사용하도록 지시

  • jest.setSystemTime : 가짜 타이머에서 사용할 현재 시각을 설정

  • jest.useRealTimers : 제스트에 실제 타이머를 사용하도록 지시하는 원상 복귀 함수

beforeEach, afterEach 를 사용하여 각 테스트마다 사전 설정 코드를 제거할 수 있다.

describe("greetByTime(", () => {
  beforeEach(() => {
    jest.useFakeTimers();
  })
  
  afterEach(() => {
    jest.useRealTimers();
  })
  
  test("아침에는 'good morning'을 반환한다", () => {
    jest.setSystemTime(new Date(2023, 4, 23, 8, 0, 0));
    expect(greetByTime()).toBe("good morning")
  })
})

테스트 설정과 파기

• 테스트를 실행하기 전 공통으로 설정해야 할 작업이 있거나 테스트 종료 후에 공통으로 파기하고 싶은 작업이 있는 경우

• 설정 작업을 beforeAll , beforeEach 를

• 파기 작업을 afterAll, afterEach 를 사용

beforeAll(() => console.log("1 - beforeAll"));
afterAll(() => console.log("1 - afterAll"));
beforeEach(() => console.log("1 - beforeEach"));
afterEach(() => console.log("1 - afterEach"));

test("", () => console.log("1 - test"));

describe("Scoped / Nested block", () => {
  beforeAll(() => console.log("2 - beforeAll"));
  afterAll(() => console.log("2 - afterAll"));
  beforeEach(() => console.log("2 - beforeEach"));
  afterEach(() => console.log("2 - afterEach")
  
  test("", () => console.log("2 - test"));
})

// 1 - beforeAll
// 1 - beforeEach
// 1 - test
// 1 - afterEach
// 2 - beforeAll
// 1 - beforeEach
// 2 - beforeEach
// 2 - test
// 2 - afterEach
// 1 - afterEach
// 2 - afterAll
// 1 - afterAll