我创建了一个自定义的反应钩子，它应该处理所有不太重要的 api 请求，我不想将其存储在 redux 状态中。钩子工作正常，但我在测试它时遇到了麻烦。我的测试设置是开玩笑和酶，但我决定在这里也尝试一下反应钩子测试库。
到目前为止，我尝试的是首先使用获取模拟库模拟获取请求，这工作正常。接下来，我使用renderHook方法渲染钩子，该方法来自 react-hooks-testing-library。不幸的是，看起来我不太了解waitForNextUpdate方法。
这就是我的钩子的样子。
使用API钩
子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 func
/**
* 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;
}
};
没关系，你做到了。现在，您需要使用期望进行测试。
const value = {...}
expect(result.current).toEqual(value)