Jest 3

타입스크립트[TypeScript] | jest로 DOM 테스트 하기위해 필요한 환경 설정

타입스크립트 환경에서 jest로 테스트를 하려고 코드를 작성하던 중, 아래 이미지처럼 컴포넌트를 렌더링하기 위해서는 testEnvironment 설정을 jsdom으로 설정하라는 오류가 발생했다. 그래서 jest.config.ts 파일을 아래 소스코드처럼 수정하였고, 또 다시 오류가 발생했다. import type { Config } from "jest"; const config: Config = { // ... 기존 설정 testEnvironment: "jsdom", }; export default config; 이번엔 jest-environment-jsdom은 더이상 기본으로 제공되지 않으니 설치를 해야한다는 안내였다. (As of Jest 28 "jest-environment-jsdom" is no ..

타입스크립트[TypeScript] | TS 환경에 jest 설정하기

최근 프로젝트를 진행할 때 TDD 개발 방식으로 진행해서 테스트 코드를 작성한 적이 있었고 블로그에 포스팅도 했었다. [글 보러 가기] 이번에는 TypeScript로 코드를 작성하고 있으며 vite로 개발 환경을 구축했기 때문에 jest를 따로 설치한 뒤 config 파일을 생성했다. (지난번엔 CRA로 개발 환경을 구축했고, testing-library가 기본으로 설치되어 있었다.) 타입스크립트 환경에서 jest 초기 설정 방법을 작성해보려고 한다. 패키지 설치 npm install --save-dev jest @types/jest ts-jest ts-node or yarn add -D jest @types/jest ts-jest ts-node 위 명령어를 사용하여 jest 패키지와 타입스크립트를 사용..

[React-Testing-Library] 리액트 테스트 코드 작성하는 방법 및 느낀점

개인 프로젝트를 진행하면서 새로 시도해 볼 것들을 몇 가지 정해두고 시작했다. 그중 하나는 테스트 코드를 작성하는 것이다. 처음 작성해 보면서 들었던 생각과 어떻게 코드를 작성했는지 기록을 남겨보려고 한다. 테스트 코드를 작성하기 전 길잡이 1. 어떤 코드를 작성할 것인지 사용자에게 입력 값을 받기 위한 form 컴포넌트가 필요하다고 생각해 보고, 이 코드를 화면에 그릴 예정이다. 원활한 테스트를 위해 더 구체적으로 정해보자면, 사용자에게 가보고 싶은 여행지를 답변받아야 한다고 할 때, 화면 상단에 '가보고 싶은 여행지는?' 이라는 질문이 있고 사용자는 그 아래 있는 input에 답을 작성한 다음 "제출" 버튼을 클릭하여 양식을 제출할 수 있다고 하자. 2. 어떤 코드를 테스트할 것인지(테스트 코드 시나..

Front-End 2023.05.18