useUser custom hook 사용 #126
Conversation
|
Visit the preview URL for this PR (updated for commit 5271149): https://dailyfield-a845d--pr126-customhook-wvampcyd.web.app (expires Fri, 26 Mar 2021 07:00:31 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
|
문제가 있어! 테스트 환경에서는 firebase.auth().onAuthStateChanged user state바뀌는거 몰라
|
싸인 테스트는 이렇게 돌려:
실제로 돌리면 signInWithPhoneNumber돌릴때 firebase의 onAuthStateChanged이 callback(user)을 돌려줘. 테스트 환경 안에 돌리면 signInWithPhoneNumber의 목을 onAuthStateChanged을 callback(user) 돌리게 해야해. |
|
그런데 다른 방법도 있어. 어떤 컴포넌트의 테스트 쓸때 자기 의존성만 목 만들어야해. 옛날에 Header이 firebase auth에 의지 했는데 지금은 useUser에 의지 해. 그래서 제대로 테스트 고치려면 onAuthStateChanged의 목 아니라 useUser의 목 만들면 맞아. |
|
그리고 컴포넌트 렌더 할때 마다 customHook이 돌려. 그래서 useUser목 만들면 쉽게 깔끔하게 테스트 고칠수 있어. |
|
useUser의 목은 issue 따로 뺐어 #130 |
예를 들면 signin테스트에:
이렇게 돌리면 통화해. 이렇게 하려면 onAuthStateChanged이 준 user이 바뀌어. 1.때 null user 줘야해. 3.때 진짜 user 줘야해. 근데 지금 지정 코드 보니까 1.와 3.때 똑같은 user 줘. |
|
SIGNIN 버튼 클릭하면 user 다르게 주려고 코드 작성했는데 console.log FAIL src/components/Header.test.tsx ● Test › Sign In ............ Watch Usage: Press w to show more. console.log |
|
맞아. const callback = (event) => { alert(event); };
document.body.addEventListener("click", callback);
진짜 dailyfield쓰면 싸인인 하면 onAuthStateChanged이 다시 돌리는게 아니라 onAuthStateChanged이 점긴 callback 다시 돌릴거야. 그래서 목 만드려면 마찬가지 싸인 버튼 클릭 한 후에 callback을 다시 돌려야해. 다시 해볼래? 다시 해보고 아직 못 하면 올바른 코드 알려줄게! |
|
그러면 내가 callback 함수를 trigger 해야되는거야?? |
|
응! trigger해봐! |
|
나 여기까지 해봤어! |
src/components/Header.test.tsx
Outdated
| additionalUserInfo: { isNewUser: false }, | ||
| user: {}, | ||
| }), | ||
| confirm: jest.fn().mockImplementation((callback: (user: firebase.User | null) => void) => { |
There was a problem hiding this comment.
어떻게 confirm돌리는지 보면 callback아니라 code 남겨:
dailyfield/src/components/Header.tsx
Line 58 in 5bd5517
그래서 이런 목 만들면 안 될거야.
src/components/Header.test.tsx
Outdated
| ((firebase.auth as unknown) as jest.Mock).mockReturnValue({ | ||
| onAuthStateChanged: jest.fn(), | ||
| currentUser: {}, | ||
| signOut: jest.fn().mockResolvedValue(null), | ||
| signOut: jest.fn().mockImplementation((callback: (user: firebase.User | null) => void) => { |
There was a problem hiding this comment.
Header코드 보면 signOut을 입력값 하나도 안 넘겨.
dailyfield/src/components/Header.tsx
Line 79 in 5bd5517
그래서 이 목이 callback안 받을거야. 그래서 오류 날거야. 이 코드 같아:
function mockSignOut(callback) {
callback(null);
}
mockSignOut();돌리면 callback이 undefined이야. 그래서 callback() 돌리면 undefined() 돌릴거야. undefined이 함수 아니라서 "undefined is not a function"이라는 오류 날거야.
There was a problem hiding this comment.
아 await firebase.auth().signOut(); 이부분은 이해했어!
나중에 같이 코딩할때 어떻게 풀어야되는지 알려줘! 혼자하기 너무 어려워 ㅠㅠ
src/components/Header.test.tsx
Outdated
| @@ -29,6 +31,9 @@ describe("Test", () => { | |||
|
|
|||
| render(<Header />); | |||
| await fireAntEvent.actAndClick("SIGNIN"); | |||
| await act(async () => { | |||
| if (setUser) setUser(fakeUser); | |||
src/components/Header.test.tsx
Outdated
| }); | ||
|
|
||
| render(<Header />); | ||
| await fireAntEvent.actAndClick("SIGNOUT"); | ||
| await act(async () => { | ||
| if (setUser) setUser(null); |
There was a problem hiding this comment.
signOut돌릴때 setUser(null)돌려줘
src/components/Header.test.tsx
Outdated
| currentUser: {}, | ||
| signOut: jest.fn().mockResolvedValue(null), | ||
| signOut: () => { | ||
| if (setUser) setUser(null); |
There was a problem hiding this comment.
setUser 값 항상 있어서 if (setUser) 치워줘
src/components/Header.test.tsx
Outdated
| user: {}, | ||
| }), | ||
| confirm: () => { | ||
| if (setUser) setUser(fakeUser); |
There was a problem hiding this comment.
setUser 값 항상 있어서 if (setUser) 치워줘
드디어 useUSer custom hook 완성했어!
다음에는 useReservationStatus 만들게!
fixes #85