接口自动化测试之——typescript+axios(一、基础框架搭建及断言)

本文链接：https://blog.csdn.net/bugpz/article/details/125212640

必要的环境

nodejs
typescript

"本机node版本"
v16.15.0

第一步项目创建及配置文件

创建一个文件夹暂且取名demo_ts
在目录内创建包管理 package.json 内容如下

{
 "scripts": {
   "build": "tsc",
   "run": "npm run test",
   "test": "jest",
   "test-c": "jest --coverage"
 },
 "jest": {
   "testEnvironment": "node"
 },
 "dependencies": {
   "axios": "^0.25.0",
   "ts-node": "^10.4.0",
   "typescript": "^4.5.4"
 },
 "devDependencies": {
   "@types/jest": "^27.0.3",
   "jest": "^27.4.5",
   "ts-jest": "^27.1.2"
 }
}

创建 tsconfig.json 配置如下

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2020",
    "rootDir": "./src",
    "outDir": "./out",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true,

  }
}

创建 jest.config.ts 代码如下

module.exports = {
  roots: [
    "<rootDir>"
  ],
  testRegex: 'testcases/(.+)\\.test\\.(jsx?|tsx?)$',
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

-至此目录结构如下
在这里插入图片描述

代码部分

首先创建一个文件夹src src里面分别创建文件夹 apis、 testcases、utils
在utils文件夹创建一个request.ts文件对axios进行简单的封装代码如下（封装可参考axios官方文档）

import axios from "axios";

const service = axios.create({
   timeout: 5000
})
service.interceptors.request.use(
   function (config){
       if (config.headers.token) {
           config.headers.authorization = config.headers.token
       }
       if (config.method === 'post' || config.method === 'put') {
           config.headers.contentType = 'application/json'
       }
       return config
   },
   error => {
       return Promise.reject(error)
   }
)
service.interceptors.response.use(function (response: any) {
       if (response.data.success === true) {
           return response
       }
   },
   error => {
       return Promise.reject(error)
   }
)
export const Method:any = {
   GET: 'get',
   POST: "post",
   PUT: 'put',
   DELETE: 'delete'
}
export default service

在apis创建接口文件 user.ts 代码如下 IP及api请自行修改此处只是举例无法使用

   import request, {Method} from "../utils/request";

const default_ip = 'http://www.baidu.com'

export const login = ( data = {}, headers = {}) => {
   return request({
       url:  default_ip + '/api/user/login',
       method: Method.POST,
       data,
       headers
   })
}

创建用例

在tastcases文件夹创建文件命名规则 xxx.test.ts 此处文件名为 user.test.ts 代码如下

import {login} from "../apis/user";

test('api_test', () => {
   return login({
       'password': "2d3383fa392936ad72d3383fa392936a",
       'phone': "13456789123"
   }).then( res => {
       expect(res.data.code).toBe(200)
   })
})