Как проверить компонент vue-js-modal?

Question

В моем приложении я использую vue-js-modal .

Мой компонент модального теста:

<template>
  <modal name="modal-test">
    <div class="modal-test__content">I am modal</div>
  </modal>
</template>
<script>
  export default {
    name: 'modalTest',
  };
</script>

Мой юнит-тест:

import { expect } from 'chai';
import { mount, createLocalVue } from '@vue/test-utils';
import ModalTest from '@/modal/modalTest.vue';
import VModal from 'vue-js-modal';

const localVue = createLocalVue();
localVue.use(VModal);

describe('ModalTest.vue', () => {
  it('modal', () => {
    const wrapper = mount(ModalTest, {
      localVue,
    });
    expect(wrapper.find('.modal-test__content').exists()).eq(true);
  });
});

Скажите мне, пожалуйста, как я могу проверить существование div.'modal-test__content 'внутри модального?

Answer 1

Я не знаком с vue-js-modal, но в моем случае для пользовательского модала мне пришлось вкладывать use в components пропу.Я думаю, что это может быть потому, что я использую Vuetify, однако.

import { expect } from 'chai';
import { mount, createLocalVue } from '@vue/test-utils';
import sinon from 'sinon';

import FileItem from '@/components/fileItem.vue';
import Modal from '@/components/common/Modal.vue';

import Vue from 'vue';
import Vuetify from 'vuetify'; // eslint-disable-line


Vue.use(Vuetify, {
  components: {
    Modal
  }
});

Тогда на странице будет отображено Modal.