24.08.21 react-test 공부1

CRA로 생성한 프로젝트는 테스팅 라이브러리가 자동으로 설치되어있다.

 

또한 기본 App.js를 위한 테스트코드도 한개가 작성되어 있다.

 

터미널에 npm test를 입력해보자.

 

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

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

render은 안의 컴포넌트를 렌더링하는 함수이다.

import logo from "./logo.svg";
import "./App.css";

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

export default App;

 

const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();

screen에서 learn react라는 텍스트를 가진 엘리먼트가 document상에 있는지 테스트를 하는 것이다.

이렇게 learn react라는 문구가 없는 것을 테스팅한다면 fail을 표시해준다.

너는 learn react라는 텍스트를 찾고있는데, 그건 없어! 라고 친절하게 알려준다.

---

쿼리함수란?

쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. get, find, query 세 유형의 쿼리가 있다.

세 쿼리는 요소의 발견 유무에따라 오류발생, null return, Promise반환의 차이가 있다.

getBy	queryBy	findBy
쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 오류를 발생시킵니다. (둘 이상의 요소가 예상되는 경우에는 getAllBy를 사용)	쿼리에 대해 일치하는 노드를 반환하고 일치하는 노드가 없으면 null을 반환합니다. 이것은 존재하지 않는 요소를 어설션하는데 유용합니다. 둘 이상의 일치 항목이 발견되면 오류가 발생합니다. (확인된 경우 queryAllBy 사용)	주어진 쿼리와 일치하는 요소가 발견되면 Promise를 반환합니다. 요소가 발견되지 않거나 기본 제한 시간인 1000ms(1s) 후에 둘 이상의 요소가 발견되면 Promise가 reject됩니다. (둘 이상의 요소를 찾아야 하는 경우 findAllBy를 사용)

 

 

getByText / queryByText / findByText

---

Test Driven Development - 테스트 주도 개발

Test Driven Development란 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하고 그 테스트 코드를 Pass할 수 있는 실제 코드를 작성하는 것이다.

TDD를 하면 좋은 점

1. TDD를 하며 많은 기능을 테스트하므로 소스코드에 안정감이 부여된다.

2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다.

3. 소스코드 각각을 더욱 신중하게 짤 수 있어 클린코드가 나올 확률이 높다.

 

TDD의 단점

- 생산성이 낮아진다. 기존에 완벽하게 짠다는 가정하에 1번 작성할 코드를 2번 작성해야 하기 때문이다.

- 실패 테스트 작성 > 테스트 > 성공 테스트 작성 > 테스트 를 반복하며 결과물이 늦게 나와 프로젝트 기간에 맞추지 못할 수 있어 데드라인이 한정적이라면 사용하기 어렵다.