React + TypeScript + ESlint + Prettier + Testing Library 설정파일

리액트는 한 두번정도 경험해봤지만 typeScript, ESlint 프로젝트는 처음이고 이제부터 모든 프로젝트는 TDD로 하려고 리액트 TDD관련으로 공부해보니 testing-library라는 플러그인이 도움이 된대서 전부 다 일단 끌어모아 같이 해보려니 인프런 리액트 TDD 강의에서 공부했던 React + ESlint 환경 적용법에서는 뭔가 시행착오가 많았음.

아래 링크들을 찾아내고 적용해보니 eslint+typescript 세팅에 대한 부분이랑 testing-library는 테스트 코드 파일들에만 적용해야 하는 부분에서 헤맸던 것이었다.

나중에 익숙해져서 보면 별거 아닐수도 있긴 할것 같은데 우선 설정파일 백업용으로 적어둔다.

1. Setting ESLint on a React Typescript project (2022)
2. eslint-plugin-testing-library

위 참조 링크들 참고해서 세팅한 결과 아래 설정 파일로 실험해봤더니 testing library 쪽은 잘 적용되는 것 같은데, 아직 프로젝트 초기 단계고 경험이 많은 것이 아니라 불필요한 설정이나 이상한 부분, 적용 되지 않는 것이 있을 수도 있음.
중간에 이것저것 커맨드도 많이 치긴 했는데, 대부분 npm install 커맨드들이라 설정파일 대강 이렇게 적어놓고 오류 메시지 뜨는 것 보고 인스톨 빠뜨린 모듈들이 뭔지만 보고 커맨드 치면 될듯하다.

react 초기 세팅은

npx create-react-app my-app --template typescript

커맨드로 시작했음.

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "react-hooks",
    "testing-library",
    "jest-dom",
    "prettier"
  ],
  "rules": {
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"],
    "max-len": ["warn", { "code": 80 }],

    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "import/prefer-default-export": "off",
    "react/prop-types": "off",

    "testing-library/await-async-query": "error",
    "testing-library/no-await-sync-query": "error",
    "testing-library/no-debugging-utils": "warn",
    "testing-library/no-dom-import": "off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
  ,

  "overrides": [
    {
      "files": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[jt]s?(x)"
      ],
      "extends": [
        "react-app",
        "react-app/jest",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
      ]
    }
  ]
}

.eslintignore

*.css
*.svg

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^18.0.3",
    "@types/react-dom": "^18.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.19.0",
    "@typescript-eslint/parser": "^5.19.0",
    "eslint": "^8.13.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "eslint-plugin-testing-library": "^5.3.0"
  }
}

테스트 코드 파일("**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" 규칙에 들어가는 파일들) 내에서

  const lintTest = screen.getByRole('button', {
    name: 'lintTest',
  });

  expect(lintTest.textContent).toBe('lintTest');

lintTest.textContent에서 eslint가 아래 코드로 빠른 수정을 사용할 수 있으면 위 .eslintrc 설정파일에서 override 부분은 적용이 된 것임.

  expect(lintTest).toHaveTextContent('lintTest');

eslint 커맨드로 확인하기

$ npx eslint ./src/*

동일한 세팅이어도 VSCode가 오류 출력을 안해주기도 하던데, 시간이 좀 걸리거나 그냥 다시 껐다 키면 되기도 함. 이게 오류인지 내가 아직 eslint를 잘 몰라서 뭔가 오래 걸리게 잘못 세팅 해놨는지는 아직 모르겠는데 프로젝트 진행하면서 보자..