Testing4 [Jest #4] 리액트 컴포넌트 + 스냅샷 테스트 지금까지 익혔던 Jest를 React에서 활요해 보자. CRA로 프로젝트를 하나 만들고 간단한 컴포넌트를 작성한다. // Hello.js import React from "react"; const Hello = () => { return Hello; }; export default Hello; App컴포넌트에 넣어준다. // App.js import "./App.css"; import Hello from "./components/Hello"; function App() { return ( ); } export default App; App컴포넌트에 user객체를 하나 만들고 Props로 전달해 준다. // App.js import "./App.css"; import Hello from "./compone.. 2023. 7. 22. [Jest #3] 테스트 전/후 작업 테스트를 작성하다보면 테스트 전/후에 작업해주어야하는 일들이 생긴다. Jest는 이런 일들을 처리할 수 있는 헬퍼함수를 제공한다. // fn.js const fn = { add: (num1, num2) => num1 + num2, } module.exports = fn; fn파일에 add메소드를 작성하고, 테스트 페이지에서 코드를 작성해준다. // fn.test.js const fn = require("./fn"); let num = 0; test("0 더하기 1은 1이야.", () => { num = fn.add(num, 1); expect(num).toBe(1); }); // passed num변수를 만들고 1을 더하는 테스트 코드를 작성해서 돌렸더니 잘 통과되었다. 더 많은 테스트를 하기 코드를 작.. 2023. 7. 20. [Jest #2] Jest로 비동기 코드 테스트 자바스크립트에서 코드가 비동기로 실행되는 일이 많이 일어난다. 비동기로 실행되는 코드가 있는 경우, Jset는 다른 테스트로 옮겨가기 이전에, 테스트 중인 코드가 언제 완료되었는지 알아야 할 필요가 있다. Jest는 이를 처리하기 위해 몇가지 방법이 있다. 콜백 함수 테스트 가장 일반적인 비동기 패턴이다. // fn.js const fn = { add: (num1, num2) => num1 + num2, getName: (callback) => { const name = "Mike"; setTimeout(() => { callback(name); }, 3000); }, } module.exports = fn; fn파일에 getName을 생성하고, 테스트를 진행 한다. // fn.test.js const .. 2023. 7. 19. [Jest #1] Jest로 기본적인 테스트 작성법 Jest ? jset는 페이스북에서 만들어서 React, Vue와 같은 Javascript개발자들에게 많이 활용되고 있는 테스팅 프레임워크이다. jest는 zero config의 철학을 가지고 있어서 별도의 설치 없이 빠르게 테스트 코드를 작성헐 수 있는 장점이 있다. 또한, 문서화가 잘 형성되 있으며 결과를 신속하게 제공하는 접근하기 쉽고 친숙하며 기능이 풍부한 API로 테스트를 작성할 수 있다. 프로젝트 생성 $mkdir jest-test npm init -y npm i -D jest jest-test라는 이름의 새로운 폴더를 만들고 npm을 연결해준다. jest를 개발 의존성으로 설치해 준다. test 스크립트 수정 "scripts": { "test": "jest" }, package.json파일에.. 2023. 7. 18. 이전 1 다음
