我创建了一个自定义的react钩子,该钩子应该可以处理所有不太重要的api请求,但我不想将它们存储在redux状态。挂钩工作正常,但我无法对其进行测试。我的测试设置是开玩笑和酶,但是我决定在这里也尝试 react-hooks-testing-library 。
到目前为止,我尝试过的是先使用 fetch-mock 库模拟获取请求,但效果很好。接下来,我使用renderHook
方法渲染钩子,该方法来自react-hooks-testing-library。不幸的是,我似乎不太了解waitForNextUpdate
方法。
这是我的钩子的样子。
useApi挂钩
export function useApi<R, B = undefined>(
path: string,
body: B | undefined = undefined,
method: HttpMethod = HttpMethod.GET
): ResponseStatus<R> {
const [response, setResponse] = useState();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [error, setError] = useState<string | boolean>(false);
useEffect(() => {
const fetchData = async (): Promise<void> => {
setError(false);
setIsLoading(true);
try {
const result = await callApi(method, path, body);
setResponse(result);
} catch (errorResponse) {
setError(errorResponse);
}
setIsLoading(false);
};
fetchData();
}, [path, body, method]);
return { response, isLoading, error };
}
Hook可以采用3种我要测试的不同状态组合。不幸的是,我不知道如何。
加载数据:
{ response: undefined, isLoading: true, error: false }
已加载数据:
{ response: R, isLoading: false, error: false }
错误:
{ response: undefined, isLoading: false, error: true }
这是我目前的测试结果:
import fetchMock from 'fetch-mock';
import { useApi } from './hooks';
import { renderHook } from '@testing-library/react-hooks';
test('', async () => {
fetchMock.mock('*', {
returnedData: 'foo'
});
const { result, waitForNextUpdate } = renderHook(() => useApi('/data-owners'));
console.log(result.current);
await waitForNextUpdate();
console.log(result.current);
});
callApi函数
/**
* Method to call api.
*
* @param {HttpMethod} method - Request type.
* @param {string} path - Restful endpoint route.
* @param {any} body - Request body data.
*/
export const callApi = async (method: HttpMethod, path: string, body: any = null) => {
// Sends api request
const response = await sendRequest(method, path, body);
// Checks response and parse to the object
const resJson = response ? await response.json() : '';
if (resJson.error) {
// If message contains error, it will throw new Error with code passed in status property (e.g. 401)
throw new Error(resJson.status);
} else {
// Else returns response
return resJson;
}
};
答案 0 :(得分:1)
没关系,你做了。现在,您需要使用Expect进行测试。
const value = {...}
expect(result.current).toEqual(value)