我有一個帶有按鈕的組件，可以觸發一個函式并進行 API 呼叫。
// MainPage.tsx
ex?ort const MainPage: FC () = () => {
const [hasApiError, setHasApiError] = useState<boolean>(false)
if (hasApiError){
<ErrorPage/>
}
return <PageWithForm submitHandler=submitHandler(setHasApiError)>
}
// PageWithForm/PageWithFormServices.tsx
export const submitHandler =
(
setHasApiError: Dispatch<SetStateAction<boolean>>
): SubmitHandler<FormData> => async (data: FormData) => {
try {
const response = await callApiAndSendForm(data)
// calls another function ...
}catch(error){
setHasApiError(true)
}
}
// services/callApiAndSendForm.ts
export const callApiAndSendForm = async (data: FormData): Promise<ResponsesFromApi> =>
fetch('/api/...', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then((res) => res.json())
如果 API 呼叫、submitHandler 或任何東西使 hasApiError = true，我希望能夠測驗 ErrorPage 組件是否正確呈現。我不想直接模擬組件內部的 setHasApiError。
我試圖通過以下方式來 jest.mock callApiAndSendForm：
const callApiAndSendFormMock = callApiAndSendForm as jest.Mock
// ... function to renderMainPage
it('should render ErrorPage if api call fails', async () => {
callApiAndSendFormMock.mockRejectedValue('error')
const { getById } = renderMainPage()
expect(getById('error-page').toBeVisible())
})
但它回傳TypeError: callApiAndSendForm.mockRejectedValue is not a function
任何人都可以幫助我嗎？
uj5u.com熱心網友回復：
您應該先模擬callApiAndSendForm，在測驗檔案中匯入之后的某個地方：
//...
import { callApiAndSendForm } from 'services/callApiAndSendForm'
//...
jest.mock('services/callApiAndSendForm')
//...
it('should render ErrorPage if api call fails', async () => {
const callApiAndSendFormMock = callApiAndSendForm as jest.Mock
callApiAndSendFormMock.mockRejectedValue('error')
const { getById } = renderMainPage()
expect(getById('error-page').toBeVisible())
})
//...
然后它應該作業
您還可以在模擬函式中提供實作權：
jest.mock('services/callApiAndSendForm', () => ({
callApiAndSendForm: () => Promise.reject('error'),
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/537368.html
標籤：反应打字稿测试笑话嘲笑