[英]What should i test in this custom hook that is wrapping useSWR?
我创建了一个名为 useCity 的自定义钩子。 它封装了使用 useSWR 进行的 API 调用。
这是钩子的代码:
import useSWR from 'swr';
import { City } from '../interfaces';
import { BASE_URL } from '../../config';
interface CitiesResponse {
data?: {
records: {
fields: {
city: string;
accentcity: string;
}
}[]
},
error?: {
message: string;
}
};
interface Props {
start?: number;
rows: number;
query?: string;
sort?: 'population';
exclude?: string[];
}
const useCity = ({ start = 0, rows, query, sort, exclude }: Props) => {
const params = [`start=${start}`, `rows=${rows}`];
if (query) params.push(`q=${query}`);
if (sort) params.push(`sort=${sort}`);
if (exclude && exclude.length > 0) params.push(...exclude.map(city => `exclude.city=${city}`))
const { data, error }: CitiesResponse = useSWR(
`${BASE_URL.CITIES_SERVICE}?dataset=worldcitiespop&facet=city&${params.join('&')}`,
{ revalidateOnFocus: false, }
);
const cities: City[] = data?.records.map(record => ({
name: record.fields.city,
title: record.fields.accentcity,
})) || [];
return {
cities,
loading: !error && !data,
error,
};
};
export default useCity;
现在,我需要测试钩子。 所以,我尝试使用msw
和@testing-library/react-hooks
。
这是我的尝试:
const server = setupServer(
rest.get(BASE_URL.CITIES_SERVICE, (req, res, ctx) => {
const start = req.url.searchParams.get('start');
const rows = req.url.searchParams.get('rows');
const query = req.url.searchParams.get('query');
const sort = req.url.searchParams.get('sort');
const exclude = req.url.searchParams.getAll('exclude.city');
const getReturnVal: () => DatabaseCity[] = () => {
// i will write some code that assumes what server will return
};
return res(
ctx.status(200),
ctx.json({
records: getReturnVal(),
}),
);
}),
...fallbackHandlers,
);
beforeAll(() => server.listen());
afterEach(() => {
server.resetHandlers();
cache.clear();
});
afterAll(() => server.close());
it('should return number of cities equal to passed in rows', async () => {
const wrapper = ({ children } : { children: ReactNode }) => (
<SWRConfig value={{ dedupingInterval: 0 }}>
{children}
</SWRConfig>
);
const { result, waitForNextUpdate, } = renderHook(() => useCity({ rows: 2 }), { wrapper });
const { cities:_cities, loading:_loading, error:_error } = result.current;
expect(_cities).toHaveLength(0);
await waitForNextUpdate();
const { cities, loading, error } = result.current;
expect(cities).toHaveLength(2);
});
我认为一旦我实现了模拟功能,测试用例就会通过。
但我不知道这是否是测试这种钩子的正确方法。 我是一名前端开发人员,这是我测试 API 调用的责任吗?
我是编写涉及 API 调用的测试用例的新手。 我是否朝着正确的方向前进? 我不知道这种测试叫什么。 如果有人能告诉我我正在执行的测试类型,那么它将帮助我 google 寻找解决方案,而不是浪费其他开发人员的时间来回答我的问题。
看起来你在正确的轨道上。
你的useCity
钩子基本上做了两件事,你可以在测试中验证:
您可以使用间谍验证使用正确的 url 调用useSWR
:
import * as SWR from 'swr';
jest.spyOn(SWR, 'default'); // write this line before rendering the hook.
expect(SWR.default).toHaveBeenCalledWith(expectedUrl, {}); // pass any options that were passed in actual object
您可以通过useCities
方式验证useCities
返回正确的城市
const { cities } = result.current;
expect(cities).toEqual(expectedCities);
我是一名前端开发人员,这是我测试 API 调用的责任吗?
我认为这取决于你来寻找答案。 我个人认为测试我编写的任何代码是我的责任——这当然不是教条并且是上下文敏感的。
我不知道这种测试叫什么。 如果有人可以告诉我我正在执行的测试类型,那么它将帮助我谷歌寻找解决方案
对此,可能没有明确的答案。 有些人会称之为单元测试(因为useCities
是一个“单元”)。 其他人可能称之为集成测试(因为您在“集成”中测试useCities
和useSWR
)。
最好的办法是在谷歌上搜索诸如“如何测试 React 钩子”或“如何测试 React 组件”之类的内容。 RTL 文档是一个很好的起点。
我个人几乎从不单独测试钩子。 我发现为使用钩子的组件编写集成测试更容易、更直观。
但是,如果您的钩子将被其他项目使用,我认为单独测试它们是有意义的,就像您在这里所做的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.