背景

你是否遇到过这种情况：前后端分离体系中，后端开发人员通知你接口有改动，前端代码需要做相应调整。but，改了啥没有明确说明，这时候需要一个个页面去点击，一个个按钮去人肉测试，好不费事。

接口变动主要分两种：

• 接口名称变化（导致接口请求失败）；
• 接口返回的数据结构变化（添字段或者删字段）。

通过编写测试代码，只要输入 npm run test 即可自动测试接口是否正常，这是本文要解决的问题。

tein

读音：[tai-ing]（test-interface，取两个单词前两个字符组成），一个简短的接口测试脚本。本来想拿现成的测试框架 Jest 在上面修修改改，后来想了想要做的事非常简单，代码全部码好也不超过 400 行。

思路：

• 提前写好接口返回数据的数据结构。tein 提供命令行工具 $ tein ui ，会创建一个网页自动转换数据结构；
• 内部利用 axios 发请求判断接口名称是否变化，请求失败八成是接口名字又改了；
• 接口请求成功后，将返回值再一次进行数据结构转换，与第一步写好的结构进行对比，判断是否变化。

transform.gif

运行效果如下，有字段修改的会以不同颜色标识出来，方便定位。

dein.gif

如果你的项目也需要对接口进行测试，不妨体验一波。=> tein quick-start。

对于 outh2 请求，需要先拿到 token，之后每个请求都需要携带 token 进行请求，tein 也做了相应处理。具体 demo 参考 fixture-object-oauth2 与 issue#1。

有更好的处理方式，欢迎下方留言。