프론트엔드 정복하기

https://www.loupetestware.com/post/mocking-api-calls-with-jest Mocking API calls with Jest Who needs mocks?Mocking can refer to functions, modules, servers… and what does it even mean? “Mocks” are a type of test pattern that can b... www.loupetestware.com https://jewelism.github.io/fe/react-hook-test-jest.html#%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%BD%94%EB%93%9C Boseok Blog javascript dev blog jewelism..

useNavigation 테스트코드 작성하는 법 https://stackoverflow.com/questions/61781274/how-to-mock-usenavigation-hook-in-react-navigation-5-0-for-jest-test How to mock useNavigation hook in react-navigation 5.0 for jest test? i want to mock useNavigation hook used inside my functional component. Any workaround how to mock it using jest? import React from 'react'; import { useNavigation } from '@react-navigatio..

CRA(create-react-app)으로 앱을 만든 경우, setupTests.js 파일이 test 설정 관련 파일로 설정되어 있다. CRA로 앱을 만들지 않은 경우, 어떻게 config를 조정할까?! react-testing-library 공식 홈페이지에서는 react-testing-library 설정을 jest.config.js 로 하는 법을 알려주고 있다. testing-library.com/docs/react-testing-library/setup Setup | Testing Library React Testing Library does not require any configuration to be used. However, testing-library.com 즉, jest 설정하는 법을 보면..

테스트 중 아래와 같은 에러 메세지가 발생했다 ReferenceError: regeneratorRuntime is not defined test('', async()=>{ ... }) 테스트 코드를 위와 같이 작성했는데, async/await를 사용함으로 인해 발생한 에러라고 한다. 바벨이 async/await를 regeneratorRuntime로 설정해두었기 때문이라고 함. regeneratorRuntime 모듈을 포함한 babel-polyfill을 설치 후 import 하면 해결된다. npm install --save-dev babel-polyfill 그리고 index.js에서 위를 import 하면 된다! medium.com/@jongmoon.yoon/mocha-%EB%8B%A8%EC%9C%84-%..

react-testing-library 의 예시를 보여주는 블로그들을 보면, 어떤 곳에서는 describe와 it을 쓰고, 어떤 곳은 test를 쓴다. 차이는 무엇이고 어떤 것을 써야하는걸까??? react-testing-library 공식 홈페이지에서는 아래와 같이 설명하고 있다. testing-library.com/docs/react-testing-library/migrate-from-enzyme/#import-react-testing-library-to-your-test Note: you can also use describe and it blocks with React Testing Library. React Testing Library doesn't replace Jest, just Enzyme..

render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있다. 이 쿼리 함수들은 Variant와 Queries의 조합으로 이루어져있다. RTL 공식사이트에서는 다음 우선순위에 따라 사용할 것을 권장한다. getByLabelText getByPlaceholderText getByText getByDisplayValue getByAltText getByTitle getByRole getByTestId ( ** 아래 Queries 리스트 순서대로임) Variant Variant명 기능 getBy getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다. getAllBy getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리..