在 bootstrap-vue 模态（b-modal）int 测试中找不到按钮答案

【问题标题】：Cannot find button in bootstrap-vue modal (b-modal) int test在 bootstrap-vue 模态（b-modal）int 测试中找不到按钮
【发布时间】：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/…

标签： vue.js bootstrap-4 bootstrap-modal bootstrap-vue vue-test-utils

【解决方案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 中发生，因为它们被传输到门户），并且需要时间来允许发生转换。
老兄，你真是个天才。你把我从一个受伤的世界里救了出来。非常感谢。