标签: avoriaz

我正在尝试使用AVA和Avoriaz测试Vue.js组件的计算属性.我可以挂载组件并访问数据属性.

当我尝试访问计算属性时,该函数似乎没有该组件上的数据的范围.

computed: {
  canAdd() {
    return this.crew.firstName !== '' && this.crew.lastName !== '';
  }

我得到的错误是 Error: Cannot read property 'firstName' of undefined

测试文件:

import Vue from 'vue';
import { mount }
from 'avoriaz';
import test from 'ava';
import nextTick from 'p-immediate';
import ComputedPropTest from '../../../js/vue-components/computed_prop_test.vue';

Vue.config.productionTip = false;

test.only('Should handle computed properties', async(t) => {
  const MOCK_PROPS_DATA = {
      propsData: {
        forwardTo: '/crew',
        crew: {}
      }
    },
    wrapper = mount(ComputedPropTest, MOCK_PROPS_DATA),
    DATA = {
      crew: {
        firstName: 'Ryan',
        lastName: …

我正在测试一个使用 vue 路由器来监视 $route 的单文件组件。问题是我无法进行测试以更改路线并触发观察者的功能。

测试文件：

import { createLocalVue, shallow } from 'vue-test-utils';

import Vue from 'vue';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);

const $route = {
  path: '/my/path',
  query: { uuid: 'abc' },
}

wrapper = shallow({
  localVue,
  store,
  mocks: {
   $route,
  }
});

it('should call action when route changes', () => {
    // ensure jest has a clean state for this mocked func
    expect(actions['myVuexAction']).not.toHaveBeenCalled();
    vm.$set($route.query, 'uuid', 'def');
    //vm.$router.replace(/my/path?uuid=def') // tried when installing actual router
    //vm.$route.query.uuid …

例如，我有一个如下所示的组件。

<template>\n<div id="app">\n  <button class="my-btn" @click="increment">{{ val }}</button>\n</div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      val: 1,\n    };\n  },\n  methods: {\n    increment() {\n      fetch(\'httpstat.us/200\').then((response) => {\n        this.val++;\n      }).catch((error) => {\n        console.log(error);\n      });\n    },\n  },\n}\n</script>\n

您还可以检查这个小提琴作为简化的演示

为了对该组件进行单元测试，我编写了这样的代码。

// Jest used here\ntest(\'should work\', () => {\n  // wrapper was generated by using avoriaz\'s mount API\n  // `val` was 1 when mounted.\n  expect(wrapper.data().val).toBe(1);\n  // trigger click event for testing\n  wrapper.find(\'.my-btn\')[0].trigger(\'click\');\n  // `val` should be 2 when the button …