[udemy] 5~10강 TDD, BDD, RTL(unit, integration, functional, e2e)

 

5. TDD: 테스트 주도 개발

---

 

 

Red-green testing :

코드 작성 전 테스트 코드를 작성 하고 

테스트에 통과하도록 코드를 작성하는 것 

 

why? 

1. 테스트를 작성하는 것이 프로세스의 한 부분으로 느끼게 됨2. 효율적임    (먼저 테스트를 작성하면 변경 후에 자동으로 다시 실행 가능       변경사항마다 자동으로 다시실행 가능 Free recursion test)

 

 

 

6. React testing Library의 철학

---

 

 

RTL의 역할

가상 DOM생성

DOM과 상호작용하기 위한 유틸리티 제공

브라우저 없이 테스트 가능 하게

 

 

 

Types of Tests

1) Unit test

함수, React Component, Unit

다른 유닛과 상호작용 하는것을 테스트하지 않음

 

2) Integration test

여러 유닛 상호작용을 테스트

ex: 컴포넌트간 / 마이크로 서비스간 

 

3) Functional test

소프트웨어의 특정 기능을 테스트

코드가 아닌 동작을 테스트

ex: 데이터를 폼에 입력하고 제출 클릭시 소프트웨어가 특정 데이터 세트로 바르게 작동하는지 확인

 

4) Acceptance of. End to End (E2E) test 

브라우저 - 서버간 연결

Cypress or Selenium같은 툴이 필요 

 

 

 

7. Functional test vs Unit test

---

 

두 개의 다른 사고방식 (mindset)

1. Unit test : 

테스트를 최대한 격리. 의존성 표시

의존하는 다른 함수는 테스트버전 사용

 

테스트 실패의 의미 : 

테스트에 실패한 유닛이 문제.

 

내부테스트 : 

필요이유 - 상태 차이점에 관해 테스트

격리로 인해 실패를 쉽고 정확히 파악 가능

 

단점 :

소프트웨어와 상호작용 방식에는 테스트할 수 없음 

리팩토링으로 실패 가능성

(리팩토링이란? 동작을 변경하지 않고 소프트웨어 작성방식 변경)

 

 

2. Functional test : 

특정 동작이나 유저 플로우와 연관된 모든 단위 포함

 

장점 : 사용자가 소프트웨어와 상호작용 하는 방식과 밀접 (테스트 실패 -> 사용자 문제 연관성 높음 -> 테스트 견고)

단점 : 실패한 테스트 디버깅의 어려움 

 

전반적으로 RTL은 기능테스트의 장점이 단점을 보완한다고 생각함 

이 강의에서 이 방식으로 테스트 할 것임 

 

 

8. TDD(테스트 주도 개발) vs BDD (행동주도 개발)

---

 

테스팅 라이브러리는 

사용자 애플리케이션 사용방식 테스트를 권장

 

 

BDD : 다양한 역할간의 협업이 필요

(ex: 개발자 QA 사업파트너)

다른 그룹의 상호작용 프로세스 정의

 

여긴 개발자만 있으므로 TDD 사용하겠다 

 

 

 

9. 테스팅 라이브러리와 접근성 

(Accessibility and Finding Elements)

---

1) 테스팅 라이브러리의 요소를 찾는 방식

2) 테스팅 코드 작성해보기

 

테스팅 라이브러리의 요소를 찾는 방식: 

 

사이트에서도 스크린리더와 같은 보조기술로 요소 찾을 것을 권장

 

About Queries | Testing Library

 

 

어떤 우선순위로 사용해야 하는가? 

 

1. 누구나 엑세스 가능한 쿼리 

getByRole(요소는 문서에서 역할을 가짐),

getByLabelText(form element), 

getByPlaceholderText (input element), 

getByText (not interactive element), 

getByDisplayValue(form)

 

2. 시맨틱(Semantic)쿼리

getByAltText(img), getByTitle(title 연관)

 

3. testIDs

마지막 수단 꼭필요한 경우에만 

사용자가 볼 수도 없고 스크린 리더도 액세스 할 수 없음

 

 

테스팅 코드 작성해보기 :

 

App.js파일

link가 있고, link에는 Learn React글자가 있음 

import React from "react";
import logo from "./logo.png";

const App = () => {
  return (
    <div>
      <header>
        <img src={logo} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_black"
          rel="noopener noreferrrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

 

 

 

App.test.js

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByRole("link", { name: /learn react/i });
  expect(linkElement).toBeInTheDocument();
});

 

 

getByRole 

첫번째 인수 : 역할

두번째 인수 : 옵션 

     name : 표시해야 할 텍스트 식별 

 

 

 

role을 사용해서 가능할 때마다 element가 스크린리더에 액세스 할 수 있도록 해보기 :

w3.org 링크에서 역할 정의 확인 할 수 있음 

 

 

element에 role 추가해보기 

모든 요소에 role=""로 역할을 묶으면 됨 

일부 요소는 역할이 내장되어 있음 

ex: button - button role

a - linke