在 bootstrap-vue 模态（b-modal）int 测试中找不到按钮
Posted
技术标签:
【中文标题】在 bootstrap-vue 模态（b-modal）int 测试中找不到按钮【英文标题】：Cannot find button in bootstrap-vue modal (b-modal) int test 【发布时间】：2020-02-07 17:35:23 【问题描述】：我想在我的测试用例中测试模态行为。
-
通过页面上的按钮打开模式 (isVisible false=> true)
通过模态按钮上的按钮关闭模态（isVisible trye=> false）
第一步没问题，但是第二步失败了。我可以通过 ref 找到 modal，但在 modal 上找不到按钮。
主页.vue
<template>
<div class="home">
<b-button id='button-open' @click="open">open</b-button>
<b-modal
ref="modal-ref"
hide-footer
>
<b-button id='button-close' @click="close">close</b-button>
</b-modal>
</div>
</template>
<script>
export default
methods:
open()
console.log('open');
this.$refs['modal-ref'].show();
,
close()
console.log('ok');
this.$refs['modal-ref'].hide();
,
,
;
</script>
home.spec.js
import expect from 'chai';
import createLocalVue, mount from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import Home from '@/views/Home.vue';
describe('Boostrap Modal', () =>
it('open and close modal', async () =>
const localVue = createLocalVue();
localVue.use(BootstrapVue);
const wrapper = mount(Home,
localVue,
attachToDocument: true,
);
const open = wrapper.find('#button-open');
const modal = wrapper.find( ref: 'modal-ref' );
expect(modal.vm.isVisible).to.equal(false);
open.trigger('click');
await wrapper.vm.$nextTick();
console.log(modal.exists());
expect(modal.vm.isVisible).to.equal(true);
// find it from modal
const close = modal.find('#button-close');
expect(close.exists()).to.equal(true);
close.trigger('click');
await wrapper.vm.$nextTick();
expect(modal.vm.isVisible).to.equal(false);
wrapper.destroy();
);
);
我无法弄清楚为什么找不到关闭按钮。
（close.exists() => 错误）
【问题讨论】：
如何解决：github.com/sdf611097/problems/commit/… 【参考方案1】：Modal 默认情况下被传送到<body> 元素。并且在显示时不会在您的包装内。
您需要查询document 才能找到您的按钮：
import expect from 'chai';
import createLocalVue, mount, createWrapper from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import Home from '@/views/Home.vue';
describe('Boostrap Modal', () =>
it('open and close modal', async () =>
const localVue = createLocalVue();
localVue.use(BootstrapVue);
const wrapper = mount(Home,
localVue,
attachToDocument: true,
);
const open = wrapper.find('#button-open');
const modal = wrapper.find( ref: 'modal-ref' );
expect(modal.vm.isVisible).to.equal(false);
open.trigger('click');
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
console.log(modal.exists());
expect(modal.vm.isVisible).to.equal(true);
// find it from modal close button in the document
const closeElement = document.getElementById('button-close');
expect(closeElement).toBeDefined();
const closeWrapper = createWrapper(closeElement);
expect(closeWrapper.exists()).to.equal(true);
expect(closeWrapper.is('button')).toBe(true);
closeWrapper.trigger('click');
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
expect(modal.vm.isVisible).to.equal(false);
wrapper.destroy();
);
);
【讨论】：
顺便说一句，你为什么要等待 2 nextTick？ 传送增加了额外的延迟（模式的所有更新都将在 nextTick 中发生，因为它们被传输到门户），并且需要时间来允许发生转换。 老兄，你真是个天才。你把我从一个受伤的世界里救了出来。非常感谢。以上是关于在 bootstrap-vue 模态（b-modal）int 测试中找不到按钮的主要内容，如果未能解决你的问题，请参考以下文章
如何以编程方式在 bootstrap-vue 模态正文和页脚中注入内容？
如何使用 vue-test-utils 打开 bootstrap-vue 模态？