前端自动化测试jest教程6-mock函数

Jest教程：前端自动化测试中的Mock函数实战

最新推荐文章于 2024-05-30 17:15:20 发布

原创

最新推荐文章于 2024-05-30 17:15:20 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5 #前端 #es6

本文是jest前端自动化测试系列教程的一部分，主要讲解如何使用mock函数。通过mock，可以模拟函数调用、参数及返回值，用于替代真实数据。文中详细介绍了模拟接口数据的方法，包括设置mock返回值、模拟axios请求，以及如何将模拟数据代码独立出来，提高代码组织的优雅性。最后，预告了下一节将涉及定时器的测试。

在这里插入图片描述

准备条件

以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章

这节教程主要讲解jest中的mock函数，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空

mock函数可以在你测试实际代码的时候，捕获对函数的调用以及参数和返回值等，也可以用于模拟一些数据

安装axios

npm run axios --save

在 index.js 中写入一些待测试方法

import axios from 'axios'

export function callbackFun(fn) {
   
   
  return fn()
}

export function getData() {
   
   
  // 这里接口路径随便写一个就可以
  return axios.get('/api').then(res => res.data)
}

使用mock

在 index.test.js 中写入1个测试实例

import {
   
    callbackFun, getData } from './index'

test('测试 callbackFun，使用mockReturnValueOnce设置返回值', () => {
   
   
  let fun = jest.fn()
  fun.mockReturnValueOnce('123') // 设置调用函数1次的返回值
  fun.mockReturnValueOnce('456') // 设置调用函数2次的返回值
  fun.mockReturnValue('666') //设置每次调用函数的值都为666
  
  expect(callbackFun(fun)).toBe('123')
  expect(callbackFun(fun)).

最低0.47元/天解锁文章