반응형 개발/테스트코드12 find, get, query find, get, query *이 내용은 chatGPT의 도움을 받아 작성하였습니다. find find 쿼리는 비동기적으로 동작하며 주로 비동기적으로 로드되는 컴포넌트나 엘리먼트를 테스트 할 때 사용된다. 내부적으로 waitFor을 사용하여 엘리먼트가 등장할 때 까지 기다리다가 일정시간이 초과하면 오류를 발생시킨다. get 동기적으로 동작하며 화면에 있는지 없는지 확인한다. 없으면 즉시 오류를 발생시키기 때문에 유/무를 확인할 때 사용하면 좋다. query 동기적으로 동작한다. get과 다르게 화면에 없으면 오류를 발생시키지 않고 null을 리턴한다. 특정 엘리먼트가 화면에 없어야 하는 상황을 테스트 할 때 좋다. 2023. 9. 1. MSW(Mock Service Worker) : 비동기로 테스트하기 MSW(Mock Service Worker) : 비동기로 테스트하기 서버에서 데이터를 요청하는 경우 화면은 비동기로 그려진다. 예를들면 다음과 같은 컴포넌트가 있다. import axios from "axios"; import { useEffect, useState } from "react"; import Row from "react-bootstrap/Row"; export default function Options({ optionType }) { const [items, setItems] = useState([]); useEffect(() => { // create an abortController to attach to the network request axios // attach abortCon.. 2023. 9. 1. queryByText와 getByText queryByText와 getByText @testing-library/react의 queryByText와 getByText는 중요한 차이점을 갖고 있다. 바로 오류를 발생시키는 조건이다. queryByText queryByText는 요소를 찾을 수 없을 경우 null을 반환한다. 따라서 특정요소가 화면에 없어야 함을 확인하고자 할 때 유용하다. 예를 들어 특정 텍스트가 화면에 나타나지 않아야 할 때, queryByText를 사용하여 해당 요소가 null인지 확인할 수 있다. test("popover responds to hover", async () => { const user = userEvent.setup(); render(); // 처음에 popover가 안보이는가? const nullPopove.. 2023. 8. 28. 리액트 모달 컴포넌트 테스트 react test library를 통해 모달 컴포넌트 테스트를 작성하였다. 요구사항 버튼을 누르면 모달이 열린다. 모달 외부를 누르면 모달이 닫힌다. 모달을 클릭했을때는 모달이 닫히면 안된다. 테스트코드 import { render, screen } from '@testing-library/react'; import Test from '..'; import userEvent from '@testing-library/user-event'; test('default : modal is not visible', () => { render(); // 특정 텍스트를 통해 모달이 처음에는 안보이는 상태임을 확인한다.(=dom에 없는지) const modalText = 'This is a modal. Click o.. 2023. 8. 27. 이전 1 2 3 다음 반응형
