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将在页面上呈现。

Answer 2

在进行测试时，您必须记住，在测试UI时，您必须考虑“什么是公共接口”，“哪个是输入和输出”。在您提供的示例中，没有输入。一切都是静态的，因此您无需测试。

另一方面，您不需要导入本地Vue，并且在大多数情况下，您宁愿不使用mount也要使用shallowMount。
要查找div，您可以执行以下操作：expect(wrapper.find('div').exists()).toBe(true);

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

致谢。

如何测试vue-js-modal组件？

2 个答案: