inflearn logo
강의

Course

Instructor

Frontend Testing for Immediate Application - Part 1. Testing Basics: Unit & Integration Tests

setup, teardown 동작 순서

212

dony

1 asked

0

안녕하세요!
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
*/

 

javascript react 소프트웨어-테스트 vitest

Answer 1

0

hanjungv

안녕하세요!

질문주신 내용 답변드립니다.

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

    1. vitest의 경우 포매팅을 위해 기본 console 클래스의 동작을 가로채어 로그를 찍도록 구현되어 있는대요. 이 구현 과정에서 로깅의 타이밍이 보장되지 않는 걸로 보입니다. 실제로 setup, teardown의 코드 실행 자체는 beforeAll -> beforeEach -> afterEach -> afterAll 로 이뤄지나 log 자체의 동작때문에 다르게 찍히는 걸로 보입니다. vite.config.jsdisableConsoleIntercept옵션을 true설정하면 예상한 순서대로 로그가 찍히는 것을 확인할 수 있습니다..!

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

    1. 넵 맞습니다. 다만, root의 beforeEach, afterEach 모든 it의 개수와 비례하여 실행됩니다~!

1

dony

순서대로 잘 실행됩니다!
답변 감사합니다 🙇🏻‍♀️

말씀해주신 옵션을 찾아보던 중에 console 관련 다른 옵션들도 있어 다른 수강생분들을 위해 남겨봅니다.

  • disableConsoleIntercept: vitest에서 console의 출력을 가로채는 기능 disable 여부 (default: false) -> 해당 옵션을 true로 할 경우 test results 창이 아니라 터미널에서 vitest 실행 명령어를 입력해야 출력됩니다.

  • silent: console 출력 여부를 설정 (default: false)

  • printConsoleTrace: 해당 console이 호출된 위치를 출력할지 여부를 설정 (default: false)

mockZustand

0

66

2

프로젝트 세팅 오류 및 버전 오류 문제 문의

0

95

2

toggleIsModalOpened 테스트 할때 궁금한 점이 있습니다.

0

42

2

로딩/에러처리 검증은 어떻게 하는게 좋을까요?

0

65

1

통합 테스트에서 API 요청에 대한 검증은 이루어지지 않아도 괜찮을까요?

0

69

2

lint에러..

0

72

1

단언문 순서에 따라 테스트 결과가 왜 달라지나요?

0

108

2

useNavigate 테스트 시, 검증 대상 질문입니다.

0

113

2

강의 예시프로젝트 업데이트좀 부탁드립니다.

2

165

2

통합테스트와 단위테스트 파일 분리

0

108

1

grid 양옆에 margin은 어디서 설정되어있는건가요 ?

0

131

1

vitest 설치했는데

0

206

2

2부 할인쿠폰 관련

0

176

1

에러 해결 방법

0

406

2

직접 구현한 atom 컴포넌트 테스트 범위 질문

0

175

1

debounce 함수 테스트 정확도 관련 질문입니다.

0

176

2

ProductFilter test 어떤 방식이 더 선호되는 방식일까요?

0

204

2

통합 테스트 작성 방식에 대해 궁금한 점이 있습니다

0

258

2

vitest Extension 알려주세요.

0

267

1

2.1 강의 질문있습니다.

0

139

1

useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.

0

247

2

toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.

0

195

2

TestPayment에 쿠폰 정보를 prop으로 전달하는 이유

0

185

2

NavigationBar 테스트 속도가 너무 느린 문제

0

218

1