标签: vue-test-utils

我正在为我的 Vuejs 2 (Vuetify) 组件编写一个笑话单元测试。设置非常简单。

在组件内部，我有一个 prop，它是一个带有嵌套字段的对象：

props: ['testObject']

我有一个计算属性，它从该道具返回一个字段：

computed: {
    myField() {
      return this.testObject.testField;
    }
}

我写了一个 Jest 测试：

wrapper = mount(MyComponent, {
            mocks: {
                propsData: {
                    testObject: { testField: 'My Test Value' }
                }
            },
        });

it("should return a test field", () => {
    const field = wrapper.vm.$options.computed.myField();
    expect(field).toBe('My Test Value');
});

当我运行测试时，我得到以下信息：

TypeError: Cannot read property 'testField' of undefined

所以它调用计算属性，但 testObject 未定义。

知道发生了什么事吗？

@vue/test-utils：1.3.0 @vue/vue2-jest：28.0.1 @types/jest：28.1.3 笑话：28.1.1

我在使用Vuetify构建的Vue表单上测试Vee-Validate确认函数时遇到了一些困难.我尝试测试的组件如下所示:

<template>
    <form novalidate ref="loginForm" v-model="formValid" @submit.stop.prevent="formSubmitted" @keyup.enter="formSubmitted">
      <v-container grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-text-field
              name="passwordField"
              label="Enter your Password"
              hint="At least 6 characters"
              v-model="submissionDetails.password"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|min:6'"
              data-vv-name="password"
              :error-messages="errors.collect('password')"
              ref="password"
              @change="inputTriggered"
              @input="inputTriggered"
            />
          </v-flex>
          <v-flex v-show="createAccountTicked">
            <v-text-field
              name="confirmPasswordField"
              label="Confirm your Password"
              hint="At least 6 characters"
              v-model="confirmPassword"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|confirmed:$password'"
              data-vv-name="confirmPassword"
              :error-messages="errors.collect('confirmPassword')"/>
          </v-flex>
        </v-layout>
      </v-container>
    </form>
  </template> …

我正在尝试对 @mouseover 和 @mouseleave 事件进行单元测试，该事件根据鼠标悬停显示 v-card-actions。我在我的 vuejs2 webpack 应用程序中使用 vue-test-utils。这是我在网上找到的：vue-utlis mouse click 示例。提前感谢任何提供帮助的人

这是我的代码实际的 html 模板代码：

  <v-card class="menuCard pa-1 elevation-2 f-basis-0 my-2" 
@mouseover="isBlockAct = true" @mouseleave="isBlockAct = (!checked? 
false:true)">
 <v-checkbox v-model="checked" id="checkbox" class="diCheckbox ma-0" hide- 
details></v-checkbox>
  <v-card-actions class="myUpHere pa-0">
  <v-layout row :class="{'isAct': isBlockAct, 'isNotAct': !isBlockAct}">
 </v-card>

这是我在我的 spec.js 代码中尝试过的：

  describe("Over event", () => {
     it("shows the icons if the card is over or not", () => {
      const wrapper = mount(MenuRepasRecetteCard, {
        propsData: {}
      });
      wrapper.find(".menuCard").trigger("mouseover");
      expect(wrapper.find(".isAct").text()).contain("remove_red_eye");
    });

我目前正在尝试ComponentB使用 Jest 和 vue-test-utils对单个文件组件 ( ) 进行单元测试。ComponentBextends ComponentA，其中update(product)定义了一个方法。

/* -------- Component B -------- */
<script>
import ComponentA from './ComponentA'
export default {
  extends: ComponentA,
  props: [...],
  data: () => {
    productData: {foo: 'bar', baz: 'shiz'}
  },
  methods: {
    updateProduct() {
      this.update(this.productData)
    }
  }
}
</script>

/* -------- Component A -------- */
<script>
export default {
  props: [...],
  data: () => {...},
  methods: {
    update(productData) {
      ...
    }
  }
}
</script>

然后我试图单元测试中，我shallowMount()我 …

有没有一种方法可以通过在Vue单元测试中单击“提交”按钮来实际触发表单的提交？

让我们看一下这个简单的组件：

<template>
    <form @submit.prevent="$emit('submitEventTriggered')">
        <button type="submit">Submit Form</button>
    </form>
</template>

<script>
    export default {}
</script>

您可以在此处找到类似的组件作为示例。

我想测试submit.prevent单击按钮并因此submitEventTriggered发出时触发的事件。当我在浏览器中运行此程序时，一切正常。但是以下测试失败：

import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'

describe.only('Form', () => {

    it('button click triggers submit event', () => {
        const wrapper = shallowMount(Form)

        wrapper.find('[type=\'submit\']').trigger('click')

        assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
    })

})

输出如下：

AssertionError: Form submit not triggered: expected undefined to exist

如果我将操作更改为submit.prevent直接在表单上触发，则一切正常。但是，实际上，对于“通过”按钮提交，实际上没有测试范围。

wrapper.find('form').trigger('submit.prevent')

似乎该trigger函数实际上并未单击该按钮。

为什么会这样，有没有办法解决？

如何访问dataVue 测试实例中的属性？

我看到您可以访问props，但没有data等效项。我可以通过使用类似的东西来获取数据属性wrapper.vm.foo，但我觉得还有另一种方法可能更符合测试框架的要求。

应用程序

<script>
    export default {
      data() {
        return {
          foo: 'bar'
        }
      }
    }
</script>

应用规范.js

import { shallowMount } from '@vue/test-utils'
import App from '@/App.vue'
import { expect } from 'chai';

describe("App.vue", () => {

  let wrapper;

  beforeEach(() => {
    // use this to check the state of anything in the view
    wrapper = shallowMount(App)
  });

  it("Module has the expected data attribute", () => {
    expect(wrapper.vm.foo).to.equal('bar'); // passes …

我有一个渲染 Xterm.js 终端的 Vue 组件。

终端.vue

<template>
  <div id="terminal"></div>
</template>

<script>
import Vue from 'vue';
import { Terminal } from 'xterm/lib/public/Terminal';
import { ITerminalOptions, ITheme } from 'xterm';

export default Vue.extend({
  data() {
    return {};
  },
  mounted() {
    Terminal.applyAddon(fit);
    this.term = new Terminal(opts);
    this.term.open(document.getElementById('terminal'));    
  },
</script>

我想测试这个组件。

终端测试.js

import Terminal from 'components/Terminal'
import { mount } from '@vue/test-utils';

describe('test', ()=>{
  const wrapper = mount(App);
});

当我jest在此测试文件上运行时，出现此错误：

TypeError: Cannot set property 'globalCompositeOperation' of null

      45 |     this.term = new …

我正在使用 jest 运行 vue 单元测试来检查各个组件的输出。该组件使用 vuetify。

我创建了一个 vue 实例来挂载组件：

import myComponent from './MyComponent.vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';

describe('Component', () => {
    let wrapper;

    const router = new VueRouter({
        base: '/ui/',
        routes: [
            {
                name: 'myRoute',
                path: '/route-to-my-component',
                component: myComponent
            },
        ]
    });

    beforeEach(() => {
        const localVue = createLocalVue();
        localVue.use(VueRouter);
        localVue.use(Vuetify);

        wrapper = mount(myComponent, {
            localVue: localVue,
            router
        });
    });



    it('contains a container', () => {
      expect(wrapper.contains('v-container')).toBe(true);
    })
});

我希望这个测试能够通过，但我却得到了TypeError: Cannot read property 't' of …

我有一个类似于文档中的示例的设置，其中我的组合位于与我的组件不同的文件中，如下所示：

// composition.js
import { onMounted } from '@vue/composition-api';

export default function useComposition() {
  onMounted(() => {
    console.log('Hello, world!');
  });
}

// component.vue
<template>...</template>

<script>
import { createComponent } from '@vue/composition-api';

export default createComponent({
  setup() {
    useComposition();
  }
})
</script>

我想为该composition.js文件编写一个单独的（基于 Jest 的）测试文件。但是，直接调用组合时，Vue 会报错（意料之中）：

// composition.test.js

import useComposition from './composition';

describe('Composition', () => {
  it('Works', () => {
    useComposition();
    // Error: [vue-composition-api] "onMounted" get called outside of "setup()"
  });
});

我已经尝试安装一个基于模拟组合 API …

这个问题让我很难受，我无法理解如何让Vue Test Utils和BootstrapVue一起玩得很好。

一个最小的例子看起来像这样：

MyComponent.vue

<template>
  <div>
    <b-button variant="primary" @click="play">PLAY</b-button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    play() {
      console.log("Let's play!");
    }
  }
}
</script>

在main.js我们使用BootstrapVue：Vue.use(BootstrapVue)。

这就是我试图测试click事件是否已被触发的方式：

import { expect } from 'chai';
import sinon from 'sinon';
import Vue from 'vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import BootstrapVue, { BButton } from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';

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

describe('MyComponent.vue', …