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

81—1 · 2018年11月02日 · 最后由 xiaqing 回复于 2018年11月09日 · 3239 次阅读

这里针对项目中封装好的 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'

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册