Jest - matcher

📌시작하며

연말에 가볍게 진행한 프로젝트에서 Jest를 간단히 적용해보았다. 역시 처음 도입하는 것이다 보니 시간도 많이 소요되고 삐그덕 거리기는 했지만 그래서 그런지, PASS가 뜰 때마다 너무 기뻐서 다들 봐달라고 하고 싶었다… 🤣

어쨌든, 이번 포스팅에서는 프로젝트를 진행하면서 새롭게 배운 Jest의 내용을 정리해보면서 복습해보려고 한다.

✅배열 검증

• 배열 안에 특정 값이 포함되어있는지 확인할 때는 toContain
• 배열 길이를 확인할 때는 toHaveLength

const friends = ["신짱구", "김철수", "한유리"]
it("friends 배열을 검사한다.", () => {
  expect(friends).toContain("신짱구")
  expect(friends).toHaveLength(3)
})

✅객체 검증

• 객체에 원하는 객체의 일부가 있는지 확인할 때는 toMatchObject
• 객체에 해당 키 값이 있는지 확인할 때는 toHaveProperty

const jjanggu = { name: "신짱구", class: "해바라기" }
it("jjanggu 객체를 검사한다.", () => {
  expect(jjanggu).toMatchObject({ name: "신짱구" })
  expect(jjanggu).toMatchObject({ name: "신짱구", class: "해바라기" })
  expect(jjanggu).toMatchObject({ name: "신짱구", class: "장미" }) //Fail
  expect(jjanggu).toHaveProperty("name")
})

짱구는 해바라기 반이고 장미 반이 아니므로, 아래 테스트는 실패한다.

expect(jjanggu).toMatchObject({ name: "신짱구", class: "장미" }) //Fail

✅mocking

함수 (utils)를 모킹하는 fn, mock, spyOn의 쓰임새를 알아보자!

➡️fn

• 독립적인 함수를 모킹한다.
• API의 성공, 실패 사례를 테스트 할 때 유용하게 사용할 수 있다.
• 원본 함수를 import할 필요가 없다.

it("sum 함수를 jest.fn으로 모킹해본다.", () => {
  const mockSum = jest.fn((a: number, b: number) => {
    if (a === 1 && b === 2) return 10
    if (a === 3 && b === 4) return 20
    return 0
  })

  expect(mockSum(1, 2)).toBe(10)
  expect(mockSum).toHaveBeenCalledWith(1, 2) // 함수 인자가 1, 2로 호출됨

  expect(mockSum(3, 4)).toBe(20)
  expect(mockSum(5, 6)).toBe(0)
  expect(mockSum).toHaveBeenCalledTimes(3) // 함수가 세 번 호출됨
})

➡️mock

• 특정 모듈 전체를 모킹한다.

next.js에서 자주 사용하는 next/navigation을 모킹해, pathname을 화면에 표시하는 컴포넌트를 테스트해보자.

"use client"
import React from "react"
import { usePathname } from "next/navigation"

const Path = () => {
  const pathname = usePathname()
  return <div>{pathname}</div>
}

export default Path

1. jest.mock기능을 이용해 next/navigation을 모킹한다.
2. 모킹했을 때의 결과값은 mockReturnValue를 이용해 설정한다.

import { render, screen, act } from "@testing-library/react";
import Path from "./Path";
import { usePathname } from "next/navigation";

//모듈을 모킹한다.
jest.mock("next/navigation", () => ({
  usePathname: jest.fn(),
}));

it("현재 path가 화면에 표시된다.", () => {
  // 초기 경로를 설정한다.
  (usePathname as jest.Mock).mockReturnValue("/origin-route");

  const { rerender } = render(<Path />); //리렌더링을 수동으로 trigger할 수 있게 해준다.
  screen.debug();

  // 화면에 '/origin-route' 경로가 표시되는지 확인한다.
  expect(screen.getByText("/origin-route")).toBeInTheDocument();

  // 경로를 변경한다.
  //리렌더링을 비동기적으로 처리하기 위해 act로 감싼다.
  act(() => {
    (usePathname as jest.Mock).mockReturnValue("/new-route");
  });

  // 경로가 변경되었는지 확인한다.
  // 수동으로 rerender trigger해준다.
  rerender(<Path />);
  screen.debug();

  expect(screen.getByText("/new-route")).toBeInTheDocument();
});

➡️spyOn

• 모듈이나 메서드를 감시하거나 모킹한다.

  • 이때의 ‘감시’ 는 호출 여부, 사용되는 인수 등 해당 모듈의 흐름을 살펴보고 싶을 떄 사용한다.\

• jest.spyOn은 객체의 메서드를 감시한다.

export default function sum(a: number, b: number): number {
  return a + b
}

이러한 sum함수를 감시해보자.

import sum from "./sum"

jest.spyOn(sum) //감시 불가
jest.spyOn({ sum }, "sum") // 정상 작동

:star: 위에 작성한 것 처럼, jest.spyOn는 객체를 감시하기 떄문에, jest.spyOn(sum)으로 작성하면 에러가 발생한다. 따라서, jest.spyOn({ sum }, "sum") 다음과 같이 임시로 객체 를 만들어서 감시해야 한다.

it("sum 함수에 spyOn을 적용해 동작을 검증한다.", () => {
  // sum 함수에 spyOn을 적용
  const sumSpy = jest.spyOn({ sum }, "sum")

  // sum 함수 호출
  const result = sum(3, 7)

  // 함수 호출 여부 확인
  expect(sumSpy).toHaveBeenCalled()
  expect(sumSpy).toHaveBeenCalledTimes(1)

  // 호출된 인수 확인
  expect(sumSpy).toHaveBeenCalledWith(3, 7)

  // 결과값 확인
  expect(result).toBe(10)

  // Spy 해제
  // 해제 함으로서 원래 함수의 동작을 복원하여, 다른 테스트에 영향을 주지 않도록 한다.
  sumSpy.mockRestore()
})

🗂️참고 도서

• 프런트엔드 개발을 위한 테스트 입문