[前端] 最近在写 axios 的 unit test,太痛苦了

2022-10-29 09:23:26 +08:00
 ericgui

有人玩过的吗?

尤其是 interceptor ,这个玩意儿的测试怎么写

我发现这个库,但似乎也没写怎么用 interceptor 的例子

https://github.com/knee-cola/jest-mock-axios

2605 次点击
所在节点    程序员
7 条回复
YadongZhang
2022-10-29 09:54:32 +08:00
johnkiller
2022-10-29 11:42:18 +08:00
一楼正解
jones2000
2022-10-29 12:35:44 +08:00
mock 以后很多网络错误就不能测试出来了。超时,丢包,代理修改数据包, 浏览器请求队列满了, 等等。
hamsterbase
2022-10-29 12:52:56 +08:00
1. 页面不要直接依赖 axios ,抽象一个 requestService 出来

interface RequestService {
get<T>(url: string): Promise<T>;
}

class UserService {
constructor(private request: RequestService) {}

getUser(id: string) {
return this.request.get<{ name: string }>(`user/${id}`);
}
}

function useService() {
return new UserService({} as any);
}

const Page: React.FC<{ id: string }> = (props) => {
const service = useService();
const [name, setName] = useState();
useEffect(() => {
service.getUser(props.id).then((response) => {
setName(name);
});
}, [props.id]);

return <div>{name}</div>;
};



2. 可以直接对 axios 进行集成测试。 本地起一个 node 服务,拿 AxiosRequestService 去请求这个服务。
或者是利用 httpbin 等在线服务

interface RequestService {
get<T>(url: string): Promise<T>;
}

class AxiosRequestService implements RequestService {
get() {
axios.get('......');
}
}
hamsterbase
2022-10-29 12:54:30 +08:00
1. 测业务逻辑的时候,拿 mock 的 RequestService 测试业务逻辑。

2. 测 axios 中间件的时候, 拿真实的 http 请求去测 axios 。
ericgui
2022-10-30 03:11:30 +08:00
@hamsterbase 第二条,确定吗?单元测试用真实的 http ?
MrHyde
2022-11-01 01:35:43 +08:00
@jones2000 我司现在的垃圾代码,连普通的 http request error 都测不出来呢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/890884

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX