ㅇㅇㅈ Blog

프론트엔드 수행중

0%

React-Vite-Eslint 설정

Posted on Edited on In , , ,

Vite로 구성한 React Project에 eslint 설정하기

CRA와 다르게 vite는 eslint가 기본설치 되지 않으므로 필요 모듈 설치 및 config작성을 따로 해줘야 한다.

vite로 react proejct 생성

생각보다 간단하다

1
2
3
$ npm create vite@latest
또는
$ yarn create vite

명령어를 입력하고 나면 다음 이미지처럼 나오는데 키보드로 이동해 선택 해서 만들면 끝

eslint 설치

프로젝트 생성후 package.json

프로젝트 구성이 되고나면 eslint를 설치 해준다.

1
2
3
$ yarn add eslint -D
또는
$ npm i eslint -D

eslint를 설치한후 터미널에서 다음 명령어를 입력하면

1
$ npx eslint --init
  1. How would you like to use ESLint? ESLint를 어디에 사용할거니?
  2. What type of modules does your project use? 플젝에서 어떤 타입의 모듈을 사용할거야?
  3. Which framework does your project use? 프레임워크 뭐 사용해?
  4. Does your project use TypeScript? TS 사용할거야?
  5. Where does your code run? 코드 어디서 실행 시킬거야?
  6. What format do you want your config file to be in? 파일 포맷 어떤걸로 할거야?
  7. Would you like to install them now ? 지금 이것들 설치 할거야?
    eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
  8. Which package manager do you want to use? 어떤 패키지 매니저 사용할거야?

모든 선택을 하고 나면 패키지 설치 Yes 시 패키지 설치와 함께 eslintrc.cjs 파일도 생성 된다.

그런데 eslintrc.cjs 파일을 보면 에러가 뜨는데

node 환경을 추가해주거나
overrides에 cjs파일만 node환경을 추가 해줄 수 있다.

1
2
3
4
5
6
7
module.exports = {
  env: {
    browser:true,
    es2022: true,
    node:true 
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  // ...
  env: {
    // If you don't want to change this to `node: true` globally
    es2022: true,
  },
    // then add this:
  overrides: [
    {
      files: ['**/*.cjs'],
      env: {
        node: true,
      },
    },
  ],
}

https://stackoverflow.com/questions/49789177/module-is-not-defined-and-process-is-not-defined-in-eslint-in-visual-studio-code

그럼 error가 사라진다.

rules에 rule을 추가하고 lint에 맞게 코드 작성을 하면 끝!

vite test library 설치

👉 공식문서

1
2
3
$ yarn add vitest -D
or
npm i vitest -D

package.json에 test scirpt를 작성해준다

1
2
3
4
5
6
7
8
9
10
{
  ...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "preview": "vite preview"
  },
  ...
}

vite.config.ts에 test 부분을 작성해준다 이때 주의점이
reference 부분 역시 꼭 작성해주어야 한다.

👉 참고 Git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/// <reference types="vitest" />
/// <reference types="vite/client"/>
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/setupTests.ts"],
  },
})

environment에 jsdom이 사용되었는데

React Testing Library는 React 구성 요소를 테스트하므로 jsdom과 같은 라이브러리를 사용하여 Vitest에서 HTML을 활성화해야 합니다.

jsdom을 설치하고 나머지 필요 라이브러리 @testing-library/react @testing-library/jest-dom 도 같이 설치해주자

1
2
3
$ yarn add jsdom @testing-library/react @testing-library/jest-dom -D
or
$ npm i jsdom @testing-library/react @testing-library/jest-dom -D

그담 src하위에 setup파일(여기서는 setupTests.ts)을 만들고 설정을 추가해준다. 

1
2
3
4
import matchers from "@testing-library/jest-dom/matchers"
import { expect } from "vitest"

expect.extend(matchers)

그리고 간단한 테스트를 위해 src하위에 pages를 만들고 pages안에 test디렉토리를 만들어 테스트코드를 작성해 보았다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ../src/pages/test/Page.test.tsx

import { describe, expect } from "vitest"
import Page from "../../Page"
import { render, screen } from "@testing-library/react"

describe("Page", () => {
  it("Renders hello word", () => {
    render(<Page />)

    const helloWord = screen.getByText(/hello word/i)

    expect(helloWord).toBeInTheDocument()
  })
})

eslint 와 testing-library 같이 사용하기

eslint와 test라이브러리를 같이 사용하기 위해 필요한 모듈을 설치해준다. 

1
2
3
$ yarn add eslint-plugin-jest-dom eslint-plugin-testing-library -D
or
$ npm i eslint-plugin-jest-dom eslint-plugin-testing-library -D

eslintrc에서 plugins와 extends에 추가로 작성해준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    👉 "plugin:testing-library/react",
    👉 "plugin:jest-dom/recommended"
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: [
    "react", 
    "@typescript-eslint",
    👉 "jest-dom", 
    👉 "testing-library"
    ],
  rules: {
    "react/react-in-jsx-scope": "off",
  },
}

vscode extension에서 Eslint도 같이 설치 해주어야 한다.

프로젝트 단위로 설정을 하려면 프로젝트 최상단 루트에서 .vsvode디렉토리를 생성후 setting.json에 작성해준다

프로젝트 최상단

1
2
3
4
{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "editor.formatOnSave": true
}

아니면 vscode 설정에다 작성해주어도 상관없다.

그리고나서 testcode를 일부러 틀리게 작성한후 저장해보면

자동으로 fix가 된다. 😸

이제 test code 작성법을 공부만 하면 된다..😂