인프런 커뮤니티 질문&답변

안녕하세요!
setup, teardown 강의를 보며 실습하고 있습니다.

1. beforeAll 내에 console이 첫번째로 찍히다가 afterAll과 함께 사용할 경우에는 afterAll 바로 직전(마지막 바로 앞)에 찍히고 있습니다. (afterAll을 지울 경우에는 첫번째로 찍히고 있습니다.)

2. beforeEach는 it을 실행하는 횟수만큼 실행되는거 같은데요. describe내에 선언한 beforeEach는 describe내에 호출한 it의 횟수만큼 실행되는게 맞는거 같은데 root의 beforeEach, afterEach도 it의 횟수만큼 실행되는게 맞을까요?

제가 사용한 코드와 출력화면 입니다.

import { screen } from '@testing-library/react';
import React from 'react';

import TextField from '@/components/TextField';
import render from '@/utils/test/render';

beforeEach(() => {
  console.log('2. root - beforeEach');
});
beforeAll(() => {
  console.log('1. root - beforeAll');
});

afterEach(() => {
  console.log('5. root - afterEach');
});
afterAll(() => {
  console.log('6. root - afterAll');
});

describe('placeholder', () => {
  beforeEach(() => {
    console.log('3. placeholder - beforeEach');
  });
  afterEach(() => {
    console.log('4. placeholder - afterEach');
  });
  it('기본 placeholder "텍스트를 입력해 주세요."가 노출된다.', async () => {
    await render(<TextField />);
    const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.');

    expect(textInput).toBeInTheDocument();
  });

  it('placeholder prop에 따라 placeholder가 변경된다.', async () => {
    await render(<TextField placeholder="상품명을 입력해 주세요." />);
    const textInput = screen.getByPlaceholderText('상품명을 입력해 주세요.');

    expect(textInput).toBeInTheDocument();
  });
});

/** 실행 결과
2. root - beforeEach
3. placeholder - beforeEach
4. placeholder - afterEach
5. root - afterEach
2. root - beforeEach
3. placeholder - beforeEach
4. placeholder - afterEach
5. root - afterEach
1. root - beforeAll
6. root - afterAll
*/