jest
1년간 React 테스트를 작성하며 겪은 이슈 10가지
테스트 환경은 다음과 같습니다. - jest (27.0.6 -> 28.1.3) - jsdom (16.6.0 -> 19.0.0) - @testing-library/react (12.0.0) - @testing-library/user-event (13.5.0) 1. JSDOM 환경에서 innerText 감지 불가 Select 컴포넌트를 확장한 DropdownSelect 컴포넌트의 테스트를 하던 중, 선택된 값을 감지할 수 없는 이슈가 발생했습니다. (Select 컴포넌트는 여러 옵션 중 하나를 선택할 수 있도록 해주는 UI 컴포넌트로, Renderer 컴포넌트를 동적으로 받아 다양한 요구사항에 대응할 수 있는 컴포넌트입니다) 문제가 발생한 테스트는 DropdownSelect에서 특정 값을 선택하는 과정이 포..
Husky, Lint-Staged, Storybook, Jest
도입해 본 간단한 소감을 말해보려고 한다. 1. Husky + Lint-Staged 만족도 9/10 이 둘은 한 묶음이라고 봐야 할 것 같다. 기본적으로 매 커밋마다 eslint --fix 및 타입 체크를 자동으로 해버리니 확실히 엉망인 코드가 커밋되는 일이 확 줄었다. 가끔 퇴근 직전에 lint나 type 쪽에서 걸려서 커밋 지연될 때는 좀 조급하지만, 만족도는 굉장히 높다. 나중엔 eslint외에도 테스트까지 엮어볼까 고민 중이다. 너무 무거워지려나? 2. Storybook 만족도 5/10 스토리북은 처음 써본게 아니라서 감흥이 적기도 한데, react-native 환경에서는 기존 storiesOf 문법을 써야 해서 Props추론도 안 되고... 때문에 Knobs를 붙어야 하고... 리액트 네이티브 ..
[react-native] 테스팅 툴 변경 (enzyme -> testing-library/react-native)
enzyme 환경에서 비동기 처리 후 state변경에 대응하는 과정에서 너무 고통을 받다 보니, waitFor expectation을 지원하는 testing-library를 써야겠다는 생각이 들었다. 전환하고 나니 테스트도 원할해지고, 직관적으로 사용할 수 있는 것 같아 만족스럽다. Introduction | Testing Library React Native Testing Library is a testing library for React Native inspired testing-library.com enzyme 다 썰어버리고 심플하게 간다 testHelper/utils.tsx import React from "react"; import { fireEvent as fe, FireEventFuncti..
react-native-web(ts) + jest + path alias 적용
jest를 사용한 테스트 코드는 생각보다 쉽고 재밌었는데, 환경 구축이 엄청 빡셌다 ㅠ path alias 적용 1. tsconfig.json에 절대경로 추가 "baseUrl": ".", "paths": { "@src/*": ["src/*"] }, 2. tsconfig-paths 설치 babel-plugin-module-resolver 설치 3. babel.config.js - plugins에 module-resolver 설정 추가 [ "module-resolver", { root: ["."], extensions: [".ts", ".tsx", ".jsx", ".js", ".json"], alias: { "@src": "./src", }, }, ], 4. webpack.config.js 내 alias 추..