[Jest] "Jest worker encountered 4 child process exceptions, exceeding retry limit" 에러 해결

개요

• Jest + TypeScript 환경에서 테스트 코드를 작성하다가 갑자기 위 에러가 발생했다.
• 위 에러는 비동기 테스트 코드에 대해 async/await 처리를 해주지 않아서 발생하는 에러였다.

해결

// ReceiptList.tsx
import useFetchOrder from '../../../hooks/useFetchOrder';
import convertKRW from '../../../utils/convertKRW';

type ReceiptListProps = {
  orderId:string
}

function ReceiptList({ orderId }:ReceiptListProps) {
  const order = useFetchOrder(orderId);

  if (!order) {
    return null;
  }

  return (
    <div>
      <h3>주문목록</h3>

      <ul>
        {order.menu.map((food) => (
          <li key={food.id}>
            <span>{food.name}</span>
            <span>{`${convertKRW(food.price)}원`}</span>
          </li>
        ))}
      </ul>

      <div>
        <span>총 가격</span>
        <span>{`${convertKRW(order.totalPrice)}원`}</span>
      </div>
    </div>
  );
}

export default ReceiptList;

// ReceiptList.test.tsx
import { render, screen } from '@testing-library/react';
import ReceiptList from '.';
import fixtures from '../../../../fixtures';

const { order } = fixtures;

function renderReceiptList() {
  render(<ReceiptList orderId={order.id} />);
}

describe('ReceiptList', () => {
  beforeEach(() => {
    renderReceiptList();
  });

  it('renders 주문목록, 총 가격', async () => {
    const title = await screen.findByText(/주문목록/);
    const totalPriceText = await screen.findByText(/총 가격/);

    expect(title).toBeInTheDocument();
    expect(totalPriceText).toBeInTheDocument();
  });
});

• ReceiptList 컴포넌트가 비동기로 order를 받아오는 로직을 포함하고 있으므로 테스트 코드에서도 async/await 처리를 추가해주었다.

참조

Jest worker encountered 4 child process exceptions, exceeding retry limit - DEV