Next.js 14 테스트 환경 구성하기(msw,jest,react-query)(3/3)

main loading

isLoading

side loading

다시 테스트를 정상적으로 돌리기 위한 작업을 수행하자

jest 에서 테스트 코드가 동작할때마다 msw 환경을 주입하기 위해 파일을 아래와 같이 수정한다

import '@testing-library/jest-dom'
import { server } from './src/mocks/node'

// 모든 테스트마다 msw 서버를 실행시키며 쿼리의 캐시 공유를 막기위해 서버를 리셋시켜준다.
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

테스트 하고자 하는 파일은 react-query 를 사용하고 있기 때문에 jest 에 __react-query provider__를 씌운다

// src/__tests__/page.test.tsx
import "@testing-library/jest-dom";
import { fireEvent, render } from "@testing-library/react";
import Page from "../app/page";
import { Providers } from "@/app/provider";
import MockProvider from "@/app/MockProvider";

describe("Page", () => {
  it("home 테스트 아이디가 정상 출력된다.", async () => {
    const { findByTestId } = render(
      <Providers>
        <Page />
      </Providers>,
    );
    const home = await findByTestId("home");
    expect(home).toBeInTheDocument();
  });

  it("클릭시 카운트가 증가한다.", async () => {
    const { findByTestId } = render(
      <Providers>
        <Page />
      </Providers>,
    );
    const button = await findByTestId("button");
    const countSection = await findByTestId("count-section");
    expect(countSection).toHaveTextContent("0");
    fireEvent.click(button);
    expect(countSection).toHaveTextContent("1");
  });
});

이후 테스트를 동작시키면 귀신같이 실패한다

실패하는 이유는 jest환경은 jsdom환경이며 jsdom 환경은 node를 모르기때문에 발생하는 것이다 아래와 같이 jest.config.ts 파일을 수정한다

// 파일경로 <projectName>/jest.config.ts
const config: Config = {
  ...
  // jsdom 의 export 조건은 default - browser 이다 이를 node로 변경하면 jsdom 환경을 사용 할수 없기 때문에 빈 문자열로 대입한다
  testEnvironmentOptions: {
    customExportConditions: [''],
  },
  ...
}

다시 테스트를 동작시키면 귀신같이 실패한다

마찬가지로 node 환경에 빠져있는 내용을 polyfills.js 파일을 생성하고 jest.config.ts 파일에 경로를 추가한다.

// 파일 경로 <projectName>/jest.polyfills.js
const { TextDecoder, TextEncoder } = require("node:util");

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
});

const { Blob, File } = require("node:buffer");
const { fetch, Headers, FormData, Request, Response } = require("undici");

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
});

// 파일 경로 <projectName>/jest.config.ts
// Add any custom config to be passed to Jest
const config: Config = {
  ...
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  // 추가
  setupFiles: ['./jest.polyfills.js'],
  ...
}

다시 테스트 동작시키면 귀신같이 실패한다

issue 내용에 따르면 node버전에 따른 변경사항이 제대로 반영안되어 있었다 필요한 라이브러리 설치하고 아래와 같이 jest.polyfills.js 파일을 수정한다

yarn add -D undici

// 파일 경로 <projectName>/jest.polyfills.js
// ReadableStream 을 import 하는 방식을 아래와 같이 변경한다. 
const { TextDecoder, TextEncoder } = require("node:util");
const { ReadableStream } = require("node:stream/web");

이후 테스트를 돌리면

귀신 같이 성공한다

여기까지 구성이 완료 되었다면 깃허브에 알맞게 gitAction을 이용하여 workflow를 구성하여 pr 마다 테스트가 동작가능하도록 구현을 할 수 있게 된다.

참고 문서