Testing (6) 썸네일형 리스트형 [Storybook/ Vue3] Play 함수를 이용하여 컴포넌트 상호작용 자동화 Storybook 공식 문서를 번역한 글입니다. https://storybook.js.org/docs/vue/writing-stories/play-function Play function Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org Play 함수는 스토리가 렌더링된 후 실행되는 작은 코드 스니펫입니다. 다음과 같은 용도로 사용할 수 있습니다. 사용자 대신 컴포넌트와 상호작용 테스트 시나리오를 .. 리액트 테스트 : Context API 테스트와 커스텀 렌더 함수 사용하기 TLDR : UI 사용자가 관심 없는 건 구현 상세입니다. 컨텍스트를 사용하는 컴포넌트를 테스트하려면 wrapper가 필요합니다. (ThemeProvider, Router, Authentication) 우리가 UI를 테스트 하는 이유는, bad ux(사용자 관점 버그)를 막기 위함입니다. 따라서 테스트 코드는 UI적인 관점만 드러나면 좋습니다. 코드가 아닌 사용자의 행동으로 UI가 변해야 하는 경우 act 함수를 통해 명시한 것도 비슷한 맥락입니다. 따라서, render 관련한 함수도, 유틸로 분리합니다. 테마를 테스트 하는 코드 얼핏 보면 렌더가 뭔가 이상합니다. 이는 컨텍스트를 테스트의 관심사에서 제외해 버렸기 때문입니다. 대신 테스트 자체에 좀 더 집중할 수 있습니다. (테마의 변경) https:.. 리액트 테스트 : 브라우저 API와 서드파티 모듈 mocking 배경 mocking을 이용하면 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. 이전 시간에 HTTP 요청을 모킹해 보았는데요, 때로는 모킹해야 하는 전체 브라우저 API 또는 모듈이 있습니다. 코드의 가짜 버전을 만들 때마다 "현실에 구멍을 뚫고" 결과적으로 자신감을 잃게 됩니다(이것이 E2E 테스트가 중요한 이유입니다). 테스트 더블은 실제 현실의 코드와 차이가 있고, 이는 테스트 용이성과 안정성의 tradeoff입니다. 모킹의 장점? 테스트가 소프트웨어 사용 방식과 유사할수록 더 많은 자신감을 얻을 수 있습니다. - 나 The Merits of Mocking The Merits of Mocking What are you doing when you mock someth.. 리액트 테스트 : 폼(Form) 테스트 TLDR: mocking을 이용하여 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. > jest.fn 테스트 케이스 작성 시에는 소프트웨어가 사용되는 how에 집중하는게 좋습니다. faker 라이브러리를 사용하여 매번 가짜 데이터를 만들 수 있습니다. 테스트 객체를 쉽게 만들기 위해 오브젝트 팩터리 함수를 사용합니다. 사용자는 Form과 상호 작용하는 데 많은 시간을 할애하며 Form은 응용 프로그램에서 가장 중요한 부분입니다 (예: 전자 상거래 앱의 "체크아웃" Form 또는 대부분의 앱의 "로그인" Form). 사용자가 Form에서 입력을 찾고, 정보를 입력하고, Form을 제출할 때 제출된 데이터가 올바른지 확인할 수 있는지를 검증합니다. 로그인 폼 검증 테스트할.. 리액트 테스트 : React Testing Library로 Counter 테스트하기 React Testing Library는 상용구 제거, 테스트 환경 자동 초기화 등 다양한 기능을 제공합니다. React Testing Library는 DOM Testing Library의 React 구현입니다. (다른 구현으로는 React Native Testing Library 등이 있습니다). 이전 게시물에서 작성한 코드 변경하기 돔 생성 보일러플레이트 제거 이벤트 보일러플레이트 제거 테스트 환경 초기화 보일러플레이트 제거 import * as React from 'react' import {render, fireEvent} from '@testing-library/react' import Counter from '../../components/counter' test('counter increme.. 리액트 테스트 : 라이브러리 없이 Counter 테스트하기 소프트웨어를 사용하는 것처럼 테스트하라- @kentcdodds 자바스크립트 테스트는 무엇일까요? 어떤 상태를 설정하고, 어떤 동작을 수행하고, 새로운 상태에 대한 주장을 하는 코드일 뿐입니다. 상태 > 동작 > 새로운 상태(assertion) 아래의 간단한 카운터 컴포넌트를 위의 원칙에 따라 테스트해 봅시다. 테스트 작성 시, 두 사용자를 고려합니다. 최종 사용자 : 사용자들이 내 코드와 인터랙션 하는 방법(버튼 클릭 등) 개발자 사용자 : 개발자들이 내 코드를 사용하는 방법 (렌더링, 함수 호출 등) 테스트 사용자(The Test User)는 고려 대상이 아닙니다! 리액트 컴포넌트 관점에서 개발자 사용자는 react-dom의 createRoot API(React Native와 유사한 개념)를 사용하여 .. 이전 1 다음
