标签: vue-test-utils

情况：

我正在我的 Vue 应用程序中实现单元测试，使用带有 Jest 配置的 vue-test-utils。

当我测试简单的组件时，一切都很好。但是当我测试导入其他依赖项的组件时，测试失败。

配置：

Vue 版本：2.5.17
@vue/test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
babel-jest:23.0.1

错误信息：

确切的错误消息取决于我要导入的依赖项。

例如，对于史诗微调器，错误是：

SyntaxError: Unexpected token import

使用vue-radial-progress的错误是：

SyntaxError: Unexpected token <

如何复制：

• 全新安装 vue（使用 Jest 作为单元测试套件）
• 运行示例测试，它应该通过
• 安装的依赖性（例如：npm install --save epic-spinners）
• 在 HelloWorld 组件中导入依赖项
• 再次运行测试（不更改任何内容）

如果我执行这些步骤，测试将失败并显示上述错误消息。

问题：

如何处理 vue-test-utils / Jest 中的依赖项导入？

我已经在 Vue.js 中为我的项目构建了简单的 ErrorBoundary 组件，并且正在努力为其编写单元测试。组件代码如下：

<template>
  <div class="overvue-error-boundary">
    <slot v-if="!error" />
    <div class="error-message" v-else>Something went horribly wrong here.</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      error: false
    }
  },
  errorCaptured (error, vm, info) {
    this.error = true;
  }
}
</script>

我创建了一个 ErrorThrowingComponent，它在created()生命周期挂钩上抛出错误，以便我可以测试 ErrorBoundary：

const ErrorThrowingComponent = Vue.component('error-throwing-component', {
  created() {
    throw new Error(`Generic error`);
  },
  render (h) {
    return h('div', 'lorem ipsum')
  }
});

describe('when component in slot throws an error', () => {
  it('renders …

我尝试对包含（bootstrap vue 按钮）的组件进行单元测试b-button。

我需要发出一个“click”事件来模拟单击 b-button 子组件，因为我使用shallowMount，所以所有子组件都被模拟，我不能.trigger('click')在它上面。此外，我无法访问该子项的虚拟机，因为 b-button 是一个没有实例的功能组件，因此childWrapper.vm.$emit('click')也无法工作。

使用shallowMount 测试组件的最佳选择是什么？

我尝试过的：

1. 使用安装而不是shallowMount.trigger('click')就可以完成这项工作
2. 使用的shallowMount和pass {stubs: {BButton}}b-button将被真实的实现所模拟，并且将像第1节一样工作
3. 试过了btnWrapper.trigger('click')，，，都没有成功btnWrapper.vm.$emit('click')。btnWrapper.element.click()

// TemplateComponent.vue
<template>
  <div class="row">
    <div class="col-12 p-2">
      <b-button @click="eatMe">Eat me</b-button>
    </div>
  </div>
</template>

<script>
  import bButton from 'bootstrap-vue/es/components/button/button';

  export default {
    name: "TemplateComponent",
    components: {
      bButton
    },
    methods: {
      eatMe() {
        this.$emit('click')
      }
    }
  }
</script>

// TemplateComponent.test.js
import {shallowMount} from '@vue/test-utils';

import TemplateComponent from './TemplateComponent.vue';

describe('TemplateComponent', () => …

我正在为以下组件编写单元测试：

<template>
  <sub-component
     @foo="bar"
  />
</template>
<script>
import SubComponent from './SubComponent';

export default {
  name: 'MyComponent',
  components: { SubComponent },
  methods: {
    bar(payload) {
       this.$emit('baz', ...payload);
    }
  }
}
</script>

测试将是：

import { shallowMount } from '@vue/test-utils';
import _ from 'lodash';
import MyComponent from '../../components/MyComponent';

describe('MyComponent.vue', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(MyComponent);
  });

  it('should emit baz on subcomponent foo', () => {
    const subComp = wrapper.find('sub-component-stub');
    expect(subComp.exists()).toBe(true);          // passes

    subComp.vm.$emit('foo');

    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.emitted().baz).toBeTruthy(); …

我正在对一个 vue 组件编写测试，该组件在失去焦点时必须调用一个方法。

根据 vue-test-utils 我应该使用wrapper.trigger('blur'). 但该方法没有被解雇。我怀疑这blur不是正确的事件名称，因为它显示为focusout在控制台中。但改变名字并不能解决问题。

成分：

<template>
    <input @blur="foo" />
</template>
...

测试文件：

import { mount } from 'vue-test-utils'
import MyComponent from '../MyComponent'

describe('myComponent', () => {
    const mockFn = jest.fn()
    const wrapper = mount(MyComponent, { mocks: { foo: mockFn } })
    it('fires "foo" on blur', () => {
        wrapper.trigger('blur')
        expect(mockFn).toHaveBeenCalled()
    }

我预计 usingwrapper.trigger('blur')会触发foo，这是被嘲笑的mockFn。但从mockFn未被调用过。

我正在尝试启动一个按钮单击图像，但是在运行测试时，它不断出错 find did not return cal-modal, cannot call trigger() on empty Wrapper

我究竟做错了什么？下面非常非常简化的代码：

日历.vue

<template>
                <div class="col-xs-6 text-right">
                    <b-img ref='cal-modal' id='cal-modal' class="cal-icon" @click="displayCal" v-b-modal.date-time-modal src="/static/img/ico.png"></b-img>
                </div>

</template>

测试文件

import {createLocalVue, mount} from "@vue/test-utils";
import Calendar from '@/components/Calendar.vue'
import BootstrapVue from "bootstrap-vue";
const localVue = createLocalVue()
localVue.use(BootstrapVue)


  it('display cal', () => {
      const wrapper = mount(Calendar, {localVue});
      wrapper
          .find('cal-modal')
          .trigger('click')
  })

我已经添加了问题Vue-Test-Utils Unknown custom element: 中的解决方案，但它不起作用。

当我尝试在我的单元测试规范中运行shallowMount 时遇到问题：

[Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

这是我的规格：

import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import expect from 'expect';
import Home from '../../pages/Home.vue';

describe('Home.vue', () => {
    // let wrapper;
    let localVue;
    beforeEach(() => {
        // wrapper = shallowMount(Home);
        localVue = createLocalVue();
        localVue.use(Vuetify)
        localVue.use(VueRouter)
    });

    it('renders the Home page component', () => {
        debugger;
        let wrapper = shallowMount(Home, { localVue, stubs: { RouterLink: RouterLinkStub } });
        expect(wrapper.html()).toContain('<h2>Bem-vindo …

我目前的配置是：

 "@vue/test-utils": "^1.0.0-beta.25"

如何在仍然使用插入符号的同时排除此包的特定版本^？

我想排除的版本是1.0.0-beta.31，因为这个版本目前破坏了我的整个测试。

我正在尝试测试一个在其中使用 vuex 的组件，我正在尝试传递相应组件的存储以便可以对其进行组装，但出现以下错误：

_vuex.default.store 不是构造函数

我不知道发生了什么，我在互联网上找不到任何可以帮助我的东西，如果有人可以帮助我，我将不胜感激！

规范文件

import {shallowMount,createLocalVue} from '@vue/test-utils'
import Vuex from 'vuex'

import sateliteComponent from '@/components/satelite/listaSatelite.vue'
import sateliteStore from '@/core/modules/satelite/index.js'

var vueWithVuex = createLocalVue()
vueWithVuex.use(Vuex)
const store = new Vuex.store({
    sateliteStore
})
describe('testes componente satelite', () => {

    test('instanciado', () => {
        const wrapper = shallowMount(sateliteComponent,{
            localVue:vueWithVuex,
            store
        })
        expect(wrapper.isVueInstance()).toBeTruthy()

    });
});

如有必要，我可以发布正在呈现的组件

使用 Vue test-utils，我需要测试通过 prop 填充的特定输入元素的值。我已经弄清楚如何使用它的 id 查找元素：

  it("Address should render Street 1", () => {
     const street1 = wrapper.find('#street1')              // this works
     expect(street1).toEqual('223 Some Street Rd')         // nope
     expect(street1.text()).toEqual('223 Some Street Rd')  // seemed good at the time
     expect(street1.value()).toEqual('223 Some Street Rd') // grasping at straws - no love 
  });

但我无法弄清楚如何访问输入的“值”。

如有任何帮助，请提前表示感谢