关键词：
【中文标题】如何在nuxt.js中编写vue bootstrap的$bvModal.msgBoxConfirm的测试用例【英文标题】：How to write testcase of $bvModal.msgBoxConfirm of vuebootstrap in nuxt.js 【发布时间】：2020-11-28 02:59:22 【问题描述】：如何为此组件编写测试用例，如何为此编写单元用例，附加到 dom 现在可能在这种情况下工作，
如何为此组件编写测试用例，如何为此编写单元用例，附加到 dom 现在可能在这种情况下工作，
<template>
<div>
<div class="mb-2">
<b-button @click="showMsgBoxOne">Simple msgBoxConfirm</b-button>
Return value: String(boxOne)
</div>
<div class="mb-1">
<b-button @click="showMsgBoxTwo">msgBoxConfirm with options</b-button>
Return value: String(boxTwo)
</div>
</div>
</template>
<script>
export default
data()
return
boxOne: '',
boxTwo: ''
,
methods:
showMsgBoxOne()
this.boxOne = ''
this.$bvModal.msgBoxConfirm('Are you sure?')
.then(value =>
this.boxOne = value
)
.catch(err =>
// An error occurred
)
,
showMsgBoxTwo()
this.boxTwo = ''
this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.',
title: 'Please Confirm',
size: 'sm',
buttonSize: 'sm',
okVariant: 'danger',
okTitle: 'YES',
cancelTitle: 'NO',
footerClass: 'p-2',
hideHeaderClose: false,
centered: true
)
.then(value =>
this.boxTwo = value
)
.catch(err =>
// An error occurred
)
</script>
【问题讨论】：
【参考方案1】：async showMsgBoxTwo()
this.boxTwo = ''
try
const res = await this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.',
title: 'Please Confirm',
size: 'sm',
buttonSize: 'sm',
okVariant: 'danger',
okTitle: 'YES',
cancelTitle: 'NO',
footerClass: 'p-2',
hideHeaderClose: false,
centered: true
)
this.boxTwo = res
catch (e)
// error
然后
it('test', () =>
const wrapper = shallowMount(Component,
store,
localVue,
propsData: ,
)
const spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(some value))
wrapper.vm.showMsgBoxTwo()
wrapper.vm.$nextTick(() =>
expect(spy).toHaveBeenCalled()
)
)
【讨论】：
如何在 nuxt.js 中编写全局路由器功能
】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情
如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？
】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情
如何在 nuxt.js (vue.js) 中配置动态 og 标签？
】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情
如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading
】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情
Vue.js 和 Nuxt.js
...麻烦，因为整个nuxt的工作方式之间的可见性为0%。问题：如何注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情
如何在实际服务中运行 nuxt.js？
】如何在实际服务中运行nuxt.js？【英文标题】：Howtorunnuxt.jsinrealservice?【发布时间】：2017-10-2817:56:32【问题描述】：我在中使用了vue-clivueinitnuxt/expressmyProject和，npm运行开发开发。但是，npm运行构建之后，创建了dist文件。如何在... 查看详情
如何使用 Nuxt.js 仅在一个组件中使用插件？
】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情
如何在 Nuxt.js 中使用官方 Swiper.js 作为插件
】如何在Nuxt.js中使用官方Swiper.js作为插件【英文标题】：HowtouseofficialSwiper.jsasplugininNuxt.js【发布时间】：2021-01-2106:39:49【问题描述】：我有插件swiper.js代码：importVuefrom"vue";//importSwipercoreandrequiredcomponentsimportSwiperCore,Navigation,Pagina... 查看详情
如何在 nuxt.js 中安装 trading-vue-js 插件？
】如何在nuxt.js中安装trading-vue-js插件？【英文标题】：Howtoinstalltrading-vue-jspluginsinnuxt.js?【发布时间】：2020-11-2901:39:27【问题描述】：我尝试使用nuxt.js和trading-vue-js插件（如Tradingview.com）制作网站。所以我在我的项目中安装了tradi... 查看详情
如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误
】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情
vue + nuxt.js - 如何读取从外部请求接收到的 POST 请求参数
】vue+nuxt.js-如何读取从外部请求接收到的POST请求参数【英文标题】：vue+nuxt.js-HowtoreadPOSTrequestparametersreceivedfromanexternalrequest【发布时间】：2020-04-1603:20:52【问题描述】：我有一个向我的nuxt应用程序提交发布请求的外部表单。我... 查看详情
如何在 Nuxt JS 中异步全局 Mixin 数据？
】如何在NuxtJS中异步全局Mixin数据？【英文标题】：HowtoasyncglobalMixindatainNuxtJS?【发布时间】：2021-08-2302:33:45【问题描述】：首先，让我分享一下我的工作流程。在我的nuxt应用程序中，我试图通过获取用户的窗口宽度来跟踪用户... 查看详情
如何在nuxt.js中实现handsontable
】如何在nuxt.js中实现handsontable【英文标题】：Howtoimplementhandsontableintonuxt.js【发布时间】：2020-06-2608:31:04【问题描述】：我正在尝试在我使用的项目上安装handsontablenpminstallhandsontable@handsontable/vue也许我需要创建一个插件？如何在... 查看详情
在 Nuxt.js 中使用 Vue-Meta 内联 Js
】在Nuxt.js中使用Vue-Meta内联Js【英文标题】：InlineJswithVue-MetaInNuxt.js【发布时间】：2020-01-2407:34:13【问题描述】：基本上，我使用Nuxt2.9.2，并尝试使用innerHTML方法内联GoogleOptimize脚本，但每当我运行npmrungenerate时，即使__dangerouslyDis... 查看详情
Vue / Nuxt.js - 在创建的钩子中调用两次 API
】Vue/Nuxt.js-在创建的钩子中调用两次API【英文标题】：Vue/Nuxt.js-APIsbeingcalledtwiceincreatedhook【发布时间】：2021-06-2419:09:09【问题描述】：我目前正在使用Nuxt.js进行开发，并且像大多数初学者一样，我想知道最好的生命周期挂钩来... 查看详情
如何使用 Nuxt.js 从缓存中排除组件？
】如何使用Nuxt.js从缓存中排除组件？【英文标题】：HowtoexcludecomponentfromcachingusingNuxt.js?【发布时间】：2021-08-1411:18:15【问题描述】：我正在尝试在Nuxt.js中使用Vue.jskeep-aliveprop，我正在尝试缓存除一个之外的所有组件，这是我想... 查看详情
vue + nuxt.js - 如何根据域有不同的样式？
】vue+nuxt.js-如何根据域有不同的样式？【英文标题】：vue+nuxt.js-Howtohavedifferentstylesbasedondomain?【发布时间】：2020-04-1709:12:14【问题描述】：我有一个带有单个vue+nuxt应用程序的多域站点，每个站点需要具有不同的样式。关于如何... 查看详情
如何在 Nuxt.js 中使用 v-file-input 获取文件对象？
】如何在Nuxt.js中使用v-file-input获取文件对象？【英文标题】：Howtogetfileobjectusingv-file-inputinNuxt.js?【发布时间】：2021-03-1904:22:17【问题描述】：我使用了Vuetify.js作为Nuxt.Js的UI框架。当我输入文件我的应用程序时，我想获取文件对... 查看详情