커밋하기 전에 코드 테스트 및 서식 지정 프로세스를 자동화하기 위한 빠른 가이드가 될 것입니다.

우리가 사용할 스택은 다음과 같습니다.

Prettier(스타일보다 본질에 계속 집중할 수 있도록 코드 서식을 자동으로 지정).

ESLint(일반적인 코딩 실수 감지).
linter는 일련의 규칙을 사용하여 코드를 감지하는 프로그램입니다.
문법적으로 타당하고 실수를 포함할 가능성이 있습니다.

Husky는 JavaScript 프로젝트에서 Git 후크를 관리하기 위한 도구입니다. Git 후크는 커밋 또는 푸시와 같은 특정 명령 전후에 Git이 실행하는 스크립트입니다.

The core tenet of the software development methodology known as test-driven development (TDD) is to write the tests first.

TDD changes the coding experience by giving you rapid feedback:
with your tests already in place, you can quickly find out what works and what doesn’t. That gives you the freedom to experiment with different approaches.

반응 중인 테스트

Create React App으로 반응 프로젝트를 시작하는 경우. 바로 사용할 수 있으며 Jest와 함께 배송됩니다!

Jest를 테스트 프레임워크로 사용하면 번개처럼 빠른 피드백 루프를 만들 수 있습니다.

테스트 만들기:

첫 번째 단계는 파일과 테스트 파일을 만드는 것입니다.

기본 테스트 구성:

❶ describe()는 테스트 그룹인 테스트 스위트를 선언합니다. 첫 번째 인수
는 이름이고 두 번째는 하나 이상의 테스트를 포함하는 함수입니다.

❷ it()은 테스트를 선언합니다. 첫 번째 인수는 이름이고 두 번째 인수는 실제 테스트 코드가 있는 함수입니다.

❸ expect()는 어설션을 생성합니다. 단일 인수, 일반적으로 값을 사용합니다.
테스트 중인 코드에 의해 생성되고 일치 함수 집합을 노출하는 개체를 반환합니다.
+
toBe()는 테스트 중인 값(expect() 인수)과 예상 값(자체 인수) 간에 엄격한 동등성 테스트를 수행하는 매처입니다.
또는
깊은 개체 동등성을 확인하는 toEqual() 어설션 메서드

다음과 같이 구현되었습니다.

//Palindromes.test.js
import Palindromes from "./Palindromes";
describe("palindromes()", () => {
    it("correctly identifies one-word palindromes", () => {
        expect(Palindromes("madam")).toEqual(["madam"]);
    });
});

//Palindromes.js
export default function Palindromes(str) {
    return [str];
}

테스트를 실행하려면 명령 프롬프트에 다음 명령줄을 작성합니다.
npm run test

핵심 내용에 대해 알아보자

더 예뻐
코드 서식 패키지용 명령

npm i -D prettier

npm i -D eslint-config-prettier

생성에 필요한 파일
.prettierignore -> 여기에 무시해야 하는 파일을 넣습니다.

노드_모듈

커버리지

빌드

.vscode

.prettierrc.json -> 서식 지정 규칙

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": false,
    "useTabs": true,
    "jsxSingleQuote": false,
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "htmlWhitespaceSensitivity": "css",
    "printWidth": 120,
    "quoteProps": "consistent"
}

사전 커밋 후크

커밋하기 전에 명령 실행

사전 커밋 후크는 다음에 사용됩니다.

달리는게 더 예뻐요

테스트 실행 중

더 예쁘고, 허스키하고 보푸라기 단계에 대한 사전 커밋 후크 설치

npx mrm lint-staged

"prettier"추가: "prettier --write ."스크립트로 변환하거나 "prettier --write src/"를 사용하여 src 폴더 등에 있는 파일만 포맷합니다.

npm run prettier 를 실행하여 이제 파일을 수동으로 예쁘게 꾸밀 수 있습니다.

허스키 폴더 설치

npx husky install

테스트를 위해 사전 커밋 후크를 설치하고

npx husky add .husky/pre-commit "npm test"

pre-commit 파일에 npm run prettier 추가

교차 환경 설치npm i -D cross-env
package.json: "test": "cross-env CI=true react-scripts test"
그게 다야!

이제 자동화된 테스트 및 서식 지정 작업 영역을 성공적으로 만들었습니다. 이 작업 영역은 우리가 시도하고 커밋할 때마다 실행됩니다.
(테스트를 통과한 경우에만 커밋됩니다).
이렇게 하면 읽을 수 없는 코드와 버그가 있는 커밋 코드가 제거됩니다.


Trevor Burnham의 인용문을 남기겠습니다.

In the long term, the habit of putting tests first helps to form a healthy mindset for problem solving, one in which failing code evokes curiosity instead of despair.

자세한 내용을 보려면 다음 사이트를 방문하십시오.

Husky Webpage

Prettier Webpage

Jest Webpage

TDD Book by Trevor Burnham