Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >vue3/ts/jest/axios,如何模拟方法内的axios进行测试?

vue3/ts/jest/axios,如何模拟方法内的axios进行测试?

提问于 2022-08-10 04:22:33
回答 0关注 0查看 133
代码语言:js
AI代码解释
复制
const checkEmail = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    axios({
                        url: data.api.loginCheckEmail,
                        method: "get",
                        params: {email: data.userForm.email}
                    }).then((res: any) => {
                        console.log(res)
                    })
                } else {
                    console.log('error submit!')
                    return false
                }
            })
        }

以上是一个方法内的axios的请求,我应该如何测试这个axios方法???

代码语言:js
AI代码解释
复制
const wrapper = mount(Login, {
  global: {
    plugins: [i18n,ElementPlus,router],
  }
})
it("Test:login check Email is correct", async() => {
   router.push('/')
   await router.isReady()
   wrapper.find('.email-input input').setValue('my@mail.com')
   const spy = jest.spyOn(wrapper.vm, 'checkEmail')
   wrapper.find('.checkEmail').trigger('click')
   expect(spy).toHaveBeenCalled()
})

我尝试了jest.spyOn但是覆盖报告都没有显示测试已覆盖,是不是我哪里写的有问题?实际还没有生效?

希望知识渊博的人士能指导我一下,初入jest

已邀请
等3人回答

回答

成为首答用户。去 写回答
相关文章
vue3 +ts 如何安装封装axios
先在 src 下创建一个 utils文件夹,并添加一个 request.ts 文件
肥晨
2023/04/04
2.3K0
Vue3中如何使用axios进行Ajax请求?
在现代Web应用程序开发中,经常需要使用Ajax技术进行与服务器的交互,以获取数据、发送请求或更新数据等。Vue3是一种流行的JavaScript框架,为我们提供了许多工具和库来简化和优化与服务器的通信。其中一个常用的工具是axios,它是一个基于Promise的HTTP客户端,可以在浏览器和Node.js中发送HTTP请求。本文将详细介绍Vue3中使用axios进行Ajax请求的方法和技巧。
网络技术联盟站
2023/07/05
2.4K0
从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目
Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
XPoet
2021/04/26
6.7K0
从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目
【干货分享】微信小程序单元测试攻略
导语 本文作者是腾讯社交增值产品部高级前端工程师林毅雄,对前端开发领域颇有研究。接下来,本文将从测试框架、实战、覆盖率、踩坑等方面分享一下微信小程序的单元测试经验,希望能帮到大家。 01 写作初衷 大家先看看A公司与B公司的数据对比: 从上图可以看出,B公司的单元测试做的比较好,每百行error数也比A公司的项目低。 总体来说,单元测试有以下一些好处: 1,及早发现代码错误,提高代码质量和可维护性。 2,代码变更时可以快速进行检查。 然而要做好测试也有一定的困难: 1,花费时间长。 2,被测代码
WeTest质量开放平台团队
2021/12/17
3K0
Vue3 Ajax(axios)(上)
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
陈不成i
2021/07/28
2K0
Vue3 Ajax(axios)(下)
在使用 catch 时,或传递 rejection callback 作为 then 的第二个参数时,响应可以通过 error 对象可被使用。
陈不成i
2021/07/29
1.1K0
Axios的封装思想及实践(TS版本)
原生的拦截器位于axiosInstance实例中,使用方法是(来源官网:拦截器 | Axios 中文文档 (axios-http.cn))
玖柒的小窝
2021/10/26
2.5K0
Axios的封装思想及实践(TS版本)
Vue3中使用axios
axios是一个基于Promise的HTTP请求库,它可以在浏览器和Node.js中使用。axios的功能非常请打,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。
九仞山
2023/10/14
1.9K0
Vue3中使用axios
Jest中Mock网络请求
最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能会一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下Mock掉Axios发起网络请求的一些方式。初学两天的小白,如有问题还请指出。
WindRunnerMax
2021/09/15
3.5K0
Jest中Mock网络请求
最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能会一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下Mock掉Axios发起网络请求的一些方式。初学两天的小白,如有问题还请指出。
冬夜先生
2021/09/13
2.7K0
那些年错过的React组件单元测试(上)
关于前端单元测试,其实两年前我就已经关注了,但那时候只是简单的知道断言,想着也不是太难的东西,项目中也没有用到,然后就想当然的认为自己就会了。
前端森林
2021/04/12
5.3K0
【愚公系列】2022年05月 vue3系列 axios请求的封装(TS版)
Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
愚公搬代码
2022/05/20
3.2K0
axios
axios 是 Vue 推荐的一款基于 Promise 的 AJAX 组件。所以我们在使用 Vue 进行项目开发时一般都使用这个库来执行 AJAX 请求。 发送请求 axios.get(url[,config]):发送GET请求 axios.post(url,data):发送POST请求 axios.put(url,data[,config]):发送PUT请求 axios.delete(url[,config]):发送DELETE请求 axios.options(url[,config]):发送OPT
一个淡定的打工菜鸟
2018/09/06
1.6K0
JavaScript测试教程–part 4:模拟 API 调用和模拟 React 组件交互[每日前端夜话0xEA]
今天,我们进一步测试 React 组件。它涉及模拟组件交互和模拟 API 调用。你将学到两种方法,开始吧!
疯狂的技术宅
2019/11/25
4K0
JavaScript测试教程–part 4:模拟 API 调用和模拟 React 组件交互[每日前端夜话0xEA]
axios
axios 基本使用 增删改查,get查,post增,put改,delete查 <body> <button id="1">点我</button> <button id="2">点我2</button> <button id="3">点我3</button> <button id="5">点我5</button> <script> var btn = document.getElementById('1') var btn2 =
ymktchic
2022/01/18
1.5K0
axios
【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目
Vite官方文档对环境变量的介绍:环境变量和模式 | Vite 官方中文文档 (vitejs.dev)
LonelySnowman
2023/03/07
1.6K0
【从零到一手撕脚手架 | 第一节】配置基础项目结构  Vite + TypeScrpit + Vue3 初始化项目
ts 项目基于axios 请求之后自动转model
axios-mapper是用来解决这个问题,让请求直接返回model。而且优化请求,防止过快点击重复请求。
星宇大前端
2020/12/16
2.5K0
Jest实战:单元测试与服务测试
一名好的大前端开发人员,一定是一名好的“配置工程师”(滑稽脸)。而最近刚到团队,被安排给 vemoJS 和 cloudbase-cli 写测试用例,并且要保证覆盖率!
心谭博客
2020/04/21
3.5K0
JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互
在之前的两篇教程中,我们学会了如何去测试最简单的 React 组件。在实际开发中,我们的组件经常需要从外部 API 获取数据,并且组件的交互逻辑也往往更复杂。在这篇教程中,我们将学习如何测试更复杂的组件,包括用 Mock 去编写涉及外部 API 的测试,以及通过 Enzyme 来轻松模拟组件交互
一只图雀
2020/09/10
5.1K0
尤雨溪推荐神器 ni ,能替代 npm/yarn/pnpm ?简单好用!源码揭秘!
想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue等十余篇源码文章。
若川
2021/11/10
2.3K3

相似问题

在JEST中模拟静态方法

1252

请问我们使用vue,jdango,axios开发,想用这个的短信验证进行测试(学生项目)要怎么操作?

0114

ubuntu中axios请求报404,后来又变成500?

190

nodejs axios formdata添加文件名时丢失斜杠字符?

148

vue中使用ts如何申明filter的方法?

0242
相关问答用户
萃橙科技 | 合伙人擅长4个领域
擅长4个领域
擅长5个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档