⭐TDD

🪐TDD란?

TDD(TDD, Test-Driven Development)는 소프트웨어 개발 방법론 중 하나입니다. TDD는 개발자가 실제 코드를 작성하기 전에 테스트를 작성하는 것을 강조하는 개발 방법론입니다. TDD의 주요한 개념은 "테스트를 먼저 작성하고, 그 후에 테스트를 통과할 수 있는 최소한의 코드를 작성하는 것"입니다.
-chatGPT

TDD를 위해서 가장 먼저 해야하는 것은 테스트 코드를 작성하는 것이다. 특정 기능을 가진 코드만이 통과할 수 있는 테스트 코드를 작성한다.

그 다음 테스트 코드를 실행해서 실패를 확인한다. 특정 기능이 구현되지 않은 상태이기 때문에 테스트 코드가 실패함은 당연하다(성공하면 안되는 것).

테스트 코드를 통과하기 위한 아주 간단한 코드를 작성한다. 기능에 대한 기본 동작을 구현하기 위한 것으로 최대한 간결하게 작성한다.

그 다음 작성한 코드가 테스트 코드를 통과하는지 확인한다. 마지막으로는 코드에 중복된 부분을 제거하고 구조를 개선하여 깔끔하고 유지 보수를 하기 쉽게 리팩토링한다.

🪐TDD의 장점

1. TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여
   된다.
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를
   사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다.
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올
   확률이 높다.

⭐React Testing Library

🪐React Testing Library란?

React Testing Library는 React 애플리케이션의 UI 테스트를 위한 도구입니다. React Testing Library는 사용자의 관점에서 애플리케이션을 테스트하는 것을 강조합니다. 즉, 실제 사용자가 상호작용하는 방식으로 컴포넌트를 테스트하고 그 결과를 평가합니다.
-chatGPT

React Testing Library는 Enzyme을 대체하는 솔루션이다. React Testing Library는 개발자를 React 애플리케이션의 사용자 입장에 둔다. 사용자의 입장에서는 각 컴포넌트들이 어떻게 연결되고 props가 어떻게 전달되는 지가 중요하지 않다. 어떻게 컴포넌트들이 구현되어서 사용자가 사용할 지에 초점을 맞춘 것이 React Testing Library의 철학이다.

🌈구현 주도 테스트

코드 구현을 주도하여 테스트를 작성하고 이를 통과시키는 방식이다. 예를 들어 p태그에서 h2태그로 변경된다면 에러가 발생한다.

🪐설치 방법

npm install --save-dev @testing-library/react

위 명령어를 프롬프트창에서 실행되지만 create키워드로 react를 설치했다면 자동으로 설치되어있다.

⭐Jest

Jest는 JavaScript 애플리케이션의 테스트를 위한 테스트 프레임워크입니다. Facebook에서 개발한 Jest는 강력한 기능과 사용하기 쉬운 API를 제공하여 JavaScript 코드의 테스트를 단순화하고 개선하는 데 도움을 줍니다.
-chatGPT

🪐Jest 파일 구조 및 사용법

각각의 test(it)은 내부에 expect와 matcher가 매칭되어 사용된다. expect는 값을 테스트할 때마다 사용된다. matcher는 다른 방법으로 테스트하도록 매처를 사용한다.

🌈예제

⭐테스트 진행해보기

🪐npm으로 test 실행

npm test

아무것도 건드리지 않은 채로 처음 react앱을 만들어서 npm test를 진행하면 App.test.js파일이 만들어진다. Jest는 .test파일 찾아서 테스트를 진행한다는 점을 다시 생각해보자.

🪐App.test.js

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();
});

위에서 배운 구조대로 test()에는 첫 번째 인자로 test에 대한 설명, 두 번째 인자로 실행할 test가 들어간다.

render함수는 인자에 있는 컴포넌트를 DOM에 렌더링을 해주는 함수이다. 그 다음 screen 객체를 이용해서 렌더링된 회면에서 learn react가 있는 지를 확인한다.

🌈render

🪐Query 함수

https://testing-library.com/docs/queries/about/

query는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. 여러 유형의 쿼리(get, find, query)가 있다. 이들 간의 차이점은 요소가 발견되지 않으면 오류를 발생하는지 아니면 Promise를 반환하고 다시 시도하는지 여부이다. 각각의 content에 따라서 특정 쿼리가 더 유용할 수 있다.

☄️get, query, find의 차이점

getBy는 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견되면은 오류를 반환하다.

queryBy는 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null을 반환한다. 이는 존재하지 않는 요소를 판별하는데 사용된다. 둘 이상의 요소가 발견되면 에러를 반환한다.

findBy는 일치하는 요소가 발견되면 Promise 객체를 반환한다. 요소가 발견되지 않거나 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 Promise는 reject된다. 둘 이상의 요소를 찾아야 하는 경우에는 findAllBy를 사용한다.

++ waitFor는 일정 기간동안 기다려야할 때 waitFor을 사용하여 기대가 통과할 때까지 기다릴 수 있다.

⭐ESLint, Prettier

prettier을 설치할 때 npm으로 설치할 수도 있고 extension으로 설치할 수도 있다.

npm으로 설치 시에는 package.json에 설치한 것이 등록되기 때문에 해당 앱을 사용하는 모든 개발자들이 prettier을 설치하지 않아도 된다는 장점이 있고 extension으로 설치하면 혼자서 사용하기 편하다는 장점이 있다.

🪐ESLint

기존에 Create React App으로 리액트를 설치할 때 기본 eslint가 설정되어 있다. 하지만 이 상태로는 VS Code에서 바로 에러를 확인할 수 없고 앱을 실행하면 터미널 상에서만 확인할 수 있다.

VS Code에서도 확인하기 위해서 eslint 설정 파일을 생성해서 package.json에서 eslintConfig 부분을 지우고 .eslintrc.json 파일을 생성한다. 이렇게 하면은 ESLint에서 주는 기본적인 경고를 확인할 수 있다. 루트 경로에 파일을 생성해야 한다.

🪐ESLint Testing Plugins

eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다. 예를 들어서 react에 관련된 린트 설정을 위해서는 eslint-plugin-react를 사용하면 되며, react hooks에 관련된 규칙을 적용시켜주려면 eslint-plugin-react-hooks를 사용하면 된다.

☄️Plugins 설치

1. eslint-plugin-testing-library

eslint-plugin-testing-library는 테스트 작성 시 사용되는 JavaScript 코드를 검사하는 ESLint 플러그인입니다. 이 플러그인은 테스트 작성을 도와주고, 일반적인 실수나 잠재적인 문제를 찾아내는 데 도움을 줍니다.
React Testing Library, Vue Testing Library, Angular Testing Library 등과 같은 테스트 라이브러리와 함께 사용될 수 있습니다. 이 플러그인은 이러한 테스트 라이브러리를 사용할 때 흔히 발생하는 문제를 식별하고, 최적의 테스트 관행을 적용하는 데 도움을 줍니다.
eslint-plugin-testing-library를 사용하면 테스트 작성 시 다음과 같은 잠재적인 문제를 예방할 수 있습니다:
-chatGPT

npm install eslint-plugin-testing-library

2. eslint-plugin-jest-dom

eslint-plugin-jest-dom은 Jest와 함께 사용되는 JavaScript 코드를 검사하는 ESLint 플러그인입니다. 이 플러그인은 Jest와 jest-dom 라이브러리를 사용하여 작성된 코드에 대한 정적 분석을 수행하여 일관성 있는 테스트 코드를 작성하는 데 도움을 줍니다.
jest-dom은 Jest의 기능을 확장하여 DOM 요소와 관련된 테스트 코드를 작성하기 쉽게 만드는 라이브러리입니다. 예를 들어, jest-dom은 DOM 요소의 가시성, 텍스트 내용, 속성 등을 쉽게 확인하고 테스트하는데 도움이 되는 다양한 매처(matcher) 함수를 제공합니다.
-chatGPT

npm install eslint-plugin-jest-dom

🪐내부 설정

plugins 항목을 추가할 때 앞서 설치했던 부분 중 'eslint-plugin-'은 생략이 가능하다.

extends 항목에서 플러그인을 추가한 후에 규칙을 정해줘야 사용이 가능하다. 그래서 extends 항목에 사용하고자하는 규칙을 설정한다. 위 예제에서는 testing-library는 react를 사용하고 jest-dom은 추천되는 것을 사용한다.

{
    "plugins" :[
        "testing-library",
        "jest-dom"
    ],
    "extends": [
        "react-app",
        "react-app/jest",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
    ]
}

🪐설정이 잘 되었는지 확인해보기

위 예제는 문법상 오류가 없지만 expect 부분에 밑줄이 그어지면서 앱이 실행되기 전에 ESLint가 수정을 권유하고 있다. 이로써 설정이 잘 반영되었음을 확인할 수 있다.