How to test vue-js-modal component? - vue.js

Question

In my app I using vue-js-modal.
My modal-test component:
<template>
<modal name="modal-test">
<div class="modal-test__content">I am modal</div>
</modal>
</template>
<script>
export default {
name: 'modalTest',
};
</script>
My unit-test:
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);
});
});
Tell me pls, how can I test exists div.'modal-test__content' inside modal?

Answer 1

I'm not familiar with vue-js-modal but in my case for custom modal I had to nest the use in the components prop. I think it may be because I'm using Vuetify, however.
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
}
});
Then Modal will be rendered on the page.

Answer 2

In the case of testing you have to remember that when you're testing the UI you have to think "What's the public interface", "Which one is the input and the output". In the example you provided there are no input. Everything is static so you don't need to test it.
On the other hand, you don't need to import the local vue, and instead of using mount you would prefer in most of the cases use shallowMount.
For finding the div you can do: expect(wrapper.find('div').exists()).toBe(true);
I know that probably you don't need this answer anymore, but may be useful for someone else.
Regards.