白盒测试 Jest 单元测试学习 (二) -- 项目实践

81—1 · November 02, 2018 · Last by xiaqing replied at November 09, 2018 · 722 hits

这里针对项目中封装好的api接口及request请求方法,用jest做一个单元测试调用。
正常的测试方法是要通过界面触发页面事件,调用models去走api的请求流程。如下图:

在界面业务流程还未通,页面不可见时,我们可以通过jest来针对这个api进行测试。

例子:
这里api调用了我们封装好的request方法,这是常见的开发模式。我们需要验证其对于GET、POST等请求多种模式的请求的处理正确。
POST请求的api如下:

//api.js
import request from '../utils/request';

export async function queryGetGongyiList(params) {
return request('/Api/Warning/warningList', {
method: 'POST',
body: params,
});
}

在api.js同级目录下新建测试脚本:api.test.js(这个位置是随意的,只要你保证它能找api.js即可)

//导入fetch
require('isomorphic-fetch')
global.FormData = require('FormData')

//导入被测文件
let ApiTest = require('./api.js')

//准备参数
const params = {"ccserm":"F3C1CDFBF309DA9C3BCKF703C37350C98A67LJ","lat":"32.161689","lon":"118.697109","p":"1","place":"0","ps":"10","time":"2"}

//测试
test('测试请求方法正确,验证接口返回。',()=>{
// expect.assertions(1);
return ApiTest.queryGetGongyiList(params).then((result)=>{
expect(result.code).toBe('10000')
})
})

这里要注意下package.json的配置,参照如下:

"jest": {
"preset": "react-native",
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
},

执行结果:

 PASS  app/services/api.test.js
测试请求方法正确,验证接口返回。 (209ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.309s
Ran all test suites matching /^D:.react.bangbang.app.services.api\.test\.js$/i.

Process finished with exit code 0
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 1 条回复 时间 点赞

请问遇到过这种问题吗?程序引用了其他项目的代码用的@做省略代替,提示这个错误
Cannot find module '@/common/js/common' from 'state.js'

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up