Jest를 사용해보자! - 4편, Jest에서 절대경로 설정하기.

1. 글을 쓴 목적 절대 경로 설정을 하는데 애먹어서 작성한다~ 프로젝트의 기본 설정은 " Vite + React + TypeScript " 입니다. 2. 일단은 절대 경로를 설정해봅시다. 프로젝트를 하다보면 컴포넌트나 src들을 import 해와야한다. 규모가 커지면 path의 경로가 점점 길어지게 된다. import MyComponent from ../../../../../../../../../Component 이렇게 길게 작성하면 확인하기도 어렵고, 유지보수에도 좋지 않고, 아무튼 그냥 안 좋음. 그래서 직관으로 알아볼 수 있도록 설정하는 것이 "절대경로", Path alias 를 이용해주면 된다. 1) Typescript 설정해주기. 프로젝트를 typescript로 작성하기에 " tsconfig...

2023.11.22

Jest를 사용해보자! - 3편

1. 3편은 버튼 클릭 시, Count 올라가는 걸 만들거야. 1편은 셋팅, 2편은 로그인 폼까지만 만드는 걸 했다. 이번엔 button을 클릭하면 숫자가 1씩 증가하거나 감소하는 컴포넌트를 만들고 테스트를 해보려고 한다. 2. 기본적인 세팅을 해보자. App.test.tsx 파일이 아닌 Counting.test.tsx 파일을 만들어주고, src 밑에도 Counting.tsx란 파일을 생성해주고 코드를 작성해주었다. // Counting.tsx import { useState } from 'react'; export function Counting() { const [count, setCount] = useState(0); const onIncrease = () => { setCount((prev) =>..

2023.10.30

Jest를 사용해보자! - 2편

1. Jest를 사용해보자 - 1편 에 이은 2편 https://ykss.netlify.app/translation/unit-testing-with-jest-react-and-typescript/ (번역) Jest, React 및 Typescript를 사용한 단위 테스트 원문: Unit testing with Jest, React, and TypeScript 💡 소프트웨어 테스트는 무엇인가요? 소프트웨어 테스트(Software Testing… ykss.netlify.app 위의 블로그에서 간단하게 알려주셔서 이걸 활용해서 jest를 사용해보려고 한다. 1편에 이은 글이기 때문에 기본 세팅을 다 해놨다고 가정했다. 만약 못했다면 1편 글을 보고 오도록 하자. https://daily-dev-note95.t..

2023.10.27

Jest를 사용해보자! - 1편

1. Jest를 사용하기 전에 Yarn + Typescript + Jest + react-testing-library 프로젝트 생성은 yarn create vite my-react-app --template react-ts 추가로 의존성 설치는 1) yarn add -D typescript 2) yarn add -D jest jest-environment-jsdom 3) yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event 4) yarn add -D @types/jest 5) yarn add -D babel-jest ts-jest ts-node package.json 에서 scripts 부분 수정. ..

2023.10.26