[2주차 이론 study] 프론트엔드 테스트 방식

[xeunnie]

프론트엔트 테스트 방식

키워드

1. Jest
2. React Testing Library

[xeunnie]

1. Jest

Q1. Jest에서 스냅샷 테스트란 무엇이며, 어떻게 사용하나요?

Q2. Jest에서 mocking을 어떻게 수행하나요? 왜 필요한가요?

Q3. 비동기 코드를 테스트할 때 Jest에서 어떤 방법을 사용하나요?

Q4. 성능 테스트를 어떻게 수행하나요? Jest와 리액트 테스트 라이브러리로 성능 테스트를 할 수 있는 방법은 무엇인가요?

Q5. 상태 관리 라이브러리와 함께 Jest와 리액트 테스트 라이브러리를 어떻게 사용하는지 설명해주세요.

Q6. 모의 객체(Mock)와 스텁(Stub)의 차이점과 각각의 사용 사례에 대해 설명해보세요.

Q7. 테스트 커버리지란 무엇이며, 이를 어떻게 측정하고 개선할 수 있는지 설명해보세요. 100% 커버리지가 항상 좋은 것인가요?

Q8.비동기 코드에 대한 테스트를 작성할 때 주의해야 할 점과 일반적인 패턴을 설명해보세요.

[thgee]

A1. 공부해올게요

A2. Mocking은 테스트 환경에서 특정 의존성을 대체하는 기법으로, 외부 API 호출, 데이터베이스 접근, 타 라이브러리 의존성을 제거하고 테스트를 독립적으로 수행할 수 있도록 합니다. 사용법은 알아서 찾아보기~

A3. await이나 done 콜백을 사용합니다.

A4. 이런식으로 렌더링 시간 측정할 수 있다고 하네요. 근데 굳이 Jest로 성능테스트를????

const start = performance.now();
render(<MyComponent />);
const end = performance.now();
console.log(`Rendering took ${end - start}ms`);

A5. 라이브러리별로 방법이 다르겠지만, 기본적으로는 render에 컴포넌트 넣어줄 때 각 라이브러리마다의 Provider 컴포넌트로 감싸주는 듯 합니다 !

  render(
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );

A6. 공부해올게요

A7. 커버리지 종류

• 라인(Line) 커버리지: 실행된 코드 라인의 비율
• 브랜치(Branch) 커버리지: 모든 조건 분기 테스트 여부
• 함수(Function) 커버리지: 호출된 함수의 비율

테스트 커버리지가 높다고 해서 버그가 없다는 의미는 아닙니다. 의미 없는 테스트로 100% 커버리지를 채우기보다 중요한 로직을 중심으로 테스트하는 것이 더 중요합니다.

A8. 일반적인 패턴??

• async/await을 사용하여 가독성 높이기
• jest.mock()을 사용하여 외부 의존성을 제거

[dbswl701]

A1. 스냅샷 테스트란 컴포넌트나 함수의 출력을 저장하고 이후 변경이 발생했을 때 이를 비교하여 예상치 못한 변경을 감지하는 테스트 기법입니다. 주로 React 컴포넌트의 UI 변화 감지에 많이 사용되며,

function getUserName() {
  return "John Doe";
}

test("getUserName 스냅샷 테스트", () => {
  expect(getUserName()).toMatchSnapshot();
});

이렇게 toMatchSnapshot()를 이용하여 사용할 수 있습니다. jest 단독으로도 사용이 가능하나 컴포넌트 UI 변경을 감지하기 위해 react testing library와 함께 사용하는 편입니다.

A7. 테스트 커버리지는 전체 코드에서 테스트코드로 실행된 비율을 나타내는 지표로, 코드가 얼마나 검증되었는지를 평가하는데 사용됩니다. jest --coverage를 이용하여 측정 가능하며 이 옵션을 실행한다면 coverage 폴더가 생성되며 커버리티 주요 지표를 제공하는 HTMl 리포트를 확인할 수 있습니다.
테스트코드 또한 개발자가 작성하는 것이기에 완벽할 수 없습니다. 로직이 잘못되었는데도 테스트코드가 통과할 수 있기에 커버리지는 코드가 실행되었는지를 측정할 뿐, 올바르게 동작하는지 검증하는 지표는 아닙니다.

A8. Jest는 기본적으로 테스트코드가 동기적으로 실행된다고 가정하기에 비동기 함수의 실행이 완료되기 전에 테스트가 종료되면 예상치 못한 결과가 발생할 수 있습니다. 그렇기에 테스트가 끝나기 전에 종료되지 않도록 해야합니다.
일반적으로 async/await 패턴을 활용하여 테스트를 진행하며, 비동기 함수를 직접 실행하지 않고 jest의 jest.fn()을 이용하여 모킹해 테스트를 할 수도 있습니다.

[junesung1004]

A1. Jest에서 스냅샷 테스트란 무엇이며, 어떻게 사용하나요?

• 컴포넌트나 함수의 출력 결과를 고정된 상태로 저장하고, 이후 코드가 변경되었을 때 해당 출력이 이전에 저장된 상태와 일치하는지 비교하여 테스트하는 기법

import React from 'react';
import { render } from '@testing-library/react';  // React Testing Library 사용
import MyComponent from './MyComponent';        // 테스트할 컴포넌트

// Jest의 스냅샷 기능을 사용하여 테스트
it('renders correctly', () => {
  const { asFragment } = render(<MyComponent />);
  // 렌더링된 결과를 스냅샷으로 저장
  expect(asFragment()).toMatchSnapshot();
});

A3. 비동기 코드를 테스트할 때 Jest에서 어떤 방법을 사용하나요?

• Promise 혹은 async/await을 사용합니다!

A7. 테스트 커버리지란 무엇이며, 이를 어떻게 측정하고 개선할 수 있는지 설명해보세요. 100% 커버리지가 항상 좋은 것인가요?

• 코드베이스에서 얼마나 많은 코드가 테스트 코드로 커버되고 있는지를 측정하는 지표입니다.
• 수치가 높아도 테스트 코드가 얼마나 유효한지 여부에 따라 100% 커버리지여도 안좋은 테스트 코드라고 생각할 수 있습니다.

[Oh-hong]

A1. SnapShot테스트는 어떤 기능의 예상 결과를 미리 정확히 포착해두고 실제 결과에 비교하는 테스트 기법입니다.

A2. Mocking은 외부 의존성을 격리하고 테스트를 예측 가능하게 만드는 기술입니다. 왜 필요하냐면.. 내가 테스트하고싶은 기능이 있는데, 이게 다른 외부 요인때문에 영향이 있으면 안돼서..?

A7. 원래 코드의 기능이 얼마나 테스트가 되고 있는지를 나타내는 표..라고 생각은 하고 있는데 구체적으로 알아보겠습니다.. 그리고 코드 커버리지 100%는 무의미하다고 들었습니다. 커버된 코드는 테스트 실행 중에 코드가 실행되었음을 의미할 뿐, 테스트가 실제로 코드가 하는 일을 검증하는 것은 아닙니다.

[xeunnie]

2. React Testing Library

Q1. 리액트 테스트 라이브러리를 사용하는 이유는 무엇인가요?

Q2. render 함수의 역할은 무엇인가요? 어떤 옵션을 사용할 수 있나요?

Q3. 리액트 테스트 라이브러리에서 요소를 선택할 때 주로 사용하는 쿼리 메서드는 무엇인가요?

Q4. 사용자 이벤트(예: 클릭, 입력 등)를 어떻게 테스트하나요?

Q5. 커스텀 훅을 테스트할 때 어떤 접근 방식을 사용하나요?

Q6. 상태 기반 테스트(State-based Testing)와 행동 기반 테스트(Behavior-based Testing)의 차이점은 무엇이며, 각각의 테스트를 언제 사용해야 하나요?

Q7. 리액트 컴포넌트에서 발생할 수 있는 사이드 이펙트를 테스트하는 방법에 대해 설명해보세요.

Q8. 상태 변화가 있는 컴포넌트를 테스트할 때, 어떤 방법으로 상태 변화를 추적하고 검증하나요?

[thgee]

A1. 사용자 관점에서 컴포넌트를 테스트하여 신뢰할 수 있는 UI 동작을 보장하기 위해 사용합니다.

A2. 컴포넌트를 가상 DOM에 렌더링하여 테스트할 수 있도록 하며, initialState 등의 옵션을 설정할 수 있습니다.

A3. getBy, queryBy, findBy, getAllBy, queryAllBy, findAllBy 상황에 따라 적절히 사용합니다.

A4. @testing-library/user-event 패키지를 사용하여 userEvent.click(), userEvent.type() 등을 활용합니다.

A5. renderHook을 사용하여 훅을 실행하고 반환값을 검증합니다.

A6.
상태 기반: 내부 상태 변화를 검증 (예: useState 값 확인)
행동 기반: 사용자의 액션과 결과를 검증 (예: 버튼 클릭 후 UI 변경 확인)

A7. mock을 활용하여 useEffect 추적?? 하면 될 것 같아요.. 아닐sudo

A8. 어.. 그냥 이벤트 잘 발동 시키면서 추적하면 되는 것 같은데.. 특별한 방법이 있을까요? 🙃

[thgee]

userEvent 와 fireEvent의 차이를 설명해주세요.

[xeunnie]

둘다 사용자 이벤트를 시뮬레이션하는 데에 사용되는 방법인데요,
fireEvent는 단순 이벤트 발생, userEvent는 사용자 행동 모방에 초점을 맞췄다는 점에서 차이가 있습니다.

1. 함수의 출신 차이

• fireEvent
  • React Testing Library에서 제공하는 함수
• userEvent
  • @testing-library/user-event 패키지에서 제공하는 함수

2. 이벤트 발생의 차이

• fireEvent
  • 단순한 DOM 이벤트를 직접 및 수동 발생
  • 이벤트를 발생이 초점이라 사용자 행동은 반영하지 않을 수 있음
• userEvent
  • 복잡한 실제 사용자의 행동을 모방하는 것이 목적
  • 복잡한 상호작용을 지원(타이핑, 클릭, 드래그)

3. 사용 방법 차이

• fireEvent
  • 이벤트의 세부 정보 파라미터에 넣기
• userEvent
  • 사용자 예상 액션 파라미터에 넣기

간단한 경우에는 파이어이벤트를 쓰고 사용자 모방이 필요한 경우에는 userEvent를 쓰는 것 같습니다.