如何测试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.‘me test __content’在me中？

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。

Answer 2

在测试的情况下，你必须记住，当你测试UI时，你必须考虑“什么是公共接口”，“哪一个是输入和输出”。在您提供的示例中，没有输入。所有的东西都是静态的，所以你不需要测试它。

另一方面，您不需要导入本地vue，并且在大多数情况下，您更喜欢使用shallowMount，而不是使用挂载。

要查找div，您可以这样做：expect(wrapper.find('div').exists()).toBe(true);

我知道你可能不再需要这个答案，但可能对其他人有用。

致以问候。