react/typescript에서 jest로 테스트작성 하는거 미쳐버리겠어요;;;

Question

간단한거라고 하는데 제가 작성한 코드, 환경에 맞는 jest 파일 작성법은 도저히 찾아볼래야 찾아 볼수가 없어요...spyon도 에러가 발생하고.......미쳐버리겠습니다....function test(props: any) { const { close, dataHandler } = props; useEffect(() => { "" I'm using fetch get method here"" }, []); const confirmHandler = async () => { ""I'm using fetch PUT method here"" }; return ( ); } export default test;이런 느낌의 test.tsx이구요useEffect에서 렌더링될때 get으로 데이터 가져와서 input value에 셋팅합니다.button누르면 confirmHandler 가 호출되고 서버로 PUT으로 입력받은 데이터를 전송해요이걸 테스트하려고 confirmHandler 게 호출되었나 테스트 하려고하는데진짜 미쳐버리겠는게....useEffect때문에 렌더링 할때마다 PUT아니고 GET이 잡히고...뭔 죄다 props로 받은 함수 실행 같은 느낌이거나스탭숏으로 보이거나,버튼누르면 스타일 바뀌거나 숫자 업데이트 되거나 그런류의 테스트 방식만 있더라구요..... test('confirmHandler function is called when the "Apply" button is clicked', async () => { const dataHandlerMock = jest.fn(); const closeMock = jest.fn(); const confirmHandlerMock = jest.fn(); const responseData = { success: true }; global.fetch = jest.fn().mockResolvedValueOnce({ json: jest.fn().mockResolvedValueOnce(responseData), ok: true, status: 200, }); render(); fireEvent.click(screen.getByText(/적용/i)); await waitFor(() => { expect(global.fetch).toHaveBeenCalledWith("url주소입니다.", { method: "PUT", headers: { "Content-type": "application/json", }, body: JSON.stringify({ fireAdvisory: "", fireWarning: "" }), }); }); expect(dataHandlerMock).toHaveBeenCalledTimes(0); expect(closeMock).toHaveBeenCalledTimes(0); expect(confirmHandlerMock).toHaveBeenCalledTimes(0); });막 어거지로 만들어보면 호출횟수 0해야통과 ㅋㅋㅋ 호출이 되야하는데 말이죠..................그리고 close={closeMock} dataHandler={dataHandlerMock}애들 지우면 await waitFor(() => { expect(global.fetch).toHaveBeenCalledWith("url주소입니다.", { method: "PUT", headers: { "Content-type": "application/json", }, body: JSON.stringify({ fireAdvisory: "", fireWarning: "" }), }); });위에서 말한 이것도 에러, useEffect에서 초반에 GET하던거 때문에 저 mock fetch가 PUT이아니고 GET이랑 비교해버려서 에러나요jest 아시는분 제발 부탁 드립니다.....알려주세요....어제부터 이것만 붙잡고있는데제가 작성한게 너무 주류랑 떨어진건가spyOn으로도 못가져와요필요한 정보가 더 있다면 댓글달아주시면 업데이트 하겠습니다 ㅠㅠ

될때까지 · Answer

제 생각엔 useEffect 내부의 비동기적 작업이 완료되기 전에 클릭 이벤트 호출해서 충돌 나는 것 같아요. 글로벌 fetch 부분도 waitFor 로 감싸서 useEffect 가 호출 될 때 까지 기다리는 동작을 모의하고, 그 후에 클릭이벤트 호출 후 PUT 요청하는 방식으로 해서 해보면 되지 않을까 싶어요요런 느낌??

react/typescript에서 jest로 테스트작성 하는거 미쳐버리겠어요;;;

1개의 답변

#jest 목록