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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 767 天前的主题，其中的信息可能已经有所发展或是发生改变。

有人玩过的吗？

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

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

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

7 条回复 • 2022-11-01 01:35:43 +08:00

YadongZhang

2022-10-29 09:54:32 +08:00

https://mswjs.io/

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 都测不出来呢