标签: vue-test-utils

我使用 Vue 2、vue-test-utils、jest

上传图片的插件是vue-croppa。

import Croppa from 'vue-croppa'
Vue.use(Croppa, { componentName: 'image-croppa' })

它通过 v-model 安装到我的组件上。然后我可以调用它的一些方法。

模板

<image-croppa v-model="myCroppa" ...>

脚本

data() {
  return {
    myCroppa: {},
  }
},

我还有一些调用 vue-croppa 方法的方法。

handlePicture(){
    const dataUri = this.myCroppa.generateDataUrl()
    this.$emit('got-image', dataUri)
  },

我想测试我的方法调用 vue-croppa 方法。

问题是：

在测试中初始化我的组件时，如何模拟这个插件？并且是否需要测试这种行为？

我一直在遵循本指南和本指南，使用 webpacker 在 Rails 5.1 上使用 vue-test-utils 和 vue 2 设置玩笑测试。我可以在没有 vue 组件的情况下运行基本测试，但是尝试挂载 vue 组件会导致错误：

   TypeError: Cannot create property '_Ctor' on string 'PostAddress'

       7 |
       8 |   it('mounts', () => {
    >  9 |     let wrapper = shallow('PostAddress');
      10 |
      11 |     expect(1 + 1).toBe(2);
      12 |   });

      at Function.Vue.extend (node_modules/vue/dist/vue.runtime.common.js:4785:67)
      at createConstructor (node_modules/@vue/test-utils/dist/vue-test-utils.js:4562:25)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:4654:12)
      at shallow (node_modules/@vue/test-utils/dist/vue-test-utils.js:4691:10)
      at Object.<anonymous> (spec/javascript/PostAddress.spec.js:9:19)

我的测试文件PostAddress.test.js如下所示：

import { mount } from '@vue/test-utils'  // mounts with children …

我们正在将一个非常大的项目移植到 Vue.js 中，并希望在我们进行时彻底实现我们的单元测试套件。

我们想验证组件是否在创建时设置了所有必需的属性，我的测试用例如下所示：

describe('Input', () => {
  it('fail initialization with no value', () => {
    const vm = mount(Input, {
      propsData: {},
    });

    // expecting above to fail due to required prop 'value'
  });
});

该组件Input应包含一个属性value。我可以通过控制台发出的警告看到它丢失了，但我们希望在我们的单元测试中捕获它。直接测试这没有多大意义，但是一旦我们有组件嵌套多个组件，确保每个组件正确初始化其子组件很重要，这是通过向我们保证上述测试应该失败并被捕获失败来实现的。

然而，没有例外，我们有想法可以挂钩，Vue.warnHandler但这似乎只是确认构造函数按预期工作的大量工作。

是否有推荐的方法来使用 Vue.js 执行此操作？

在我的 AudioPlyar 组件中，定义了一个计算的 onAir() popery

 computed: {
    onAir() {
      return this.autoplay && !this.playing && this.seek === 0 ? false : true;
    }
 },

并在其上定义了一个观察者：

  watch: {
    onAir() {
      if (this.onAir === false) {
        this.stop();
        this.$emit("playerStop");
      }
   }
  },

我正在尝试测试这个观察者，但它有问题......

it("watcher onAir", () => {
  // given
  const wrapper = shallowMount(AudioPlayer, {
    propsData: {
      sources: ['require("@/assets/audio/ultimo_desejo.mp3"'],
      autoplay: true,
      loop: false,
      percentage: 0,
      playing: true,
      onAir: true
    },
    mixins: [VueHowler]
  });
  const spy = jest.fn();
  wrapper.vm.$on("playerStop", spy);
  // when
  wrapper.setData({ onAir: false …

我一直在尝试对 Vue 组件进行单元测试，但我似乎无法弄清楚如何模拟/存根调用 API 异步的存储对象和方法。

这是我们拥有的 Vue 组件的示例：

import { mapState, mapGetters } from 'vuex'
import router from 'components/admin/router'

export default {
name: 'Users',
computed: {
    ...mapState('admin', [
        'users',
    ]),
    ...mapGetters({
        requestInProgress: 'requestInProgress',
    }),
},
data: function() {
    return {
        filterTerm: '',
        usersLoaded: false,
    }
},
methods: {        
    getUsers(filter) {
            this.$store.dispatch('admin/getUserList', filter)
                .then(res => {
                    this.usersLoaded = true
                })
                .catch(e => {
                    this.$toast.error({
                        title: 'Failed to retrieve data',
                        message: this.$options.filters.normaliseError(e),
                    })
                })            
    },
},
mounted() {
    this.getUsers('*')
},

}

这就是我想写的测试。我什至不能让测试干净地运行而不实际尝试断言任何东西 …

v-select我有一个使用 vue.js 和货币下拉列表的表单设置。我正在尝试创建一个单元测试以确保 v-select 的当前值设置为计算值price_currency

这是选择器的 vue 代码

<v-select
 name="price_currency"
 :value="price_currency"
 @input="value => this.updateValue('price_currency', value)"
 :options="currencies"
 v-validate="validate.select"
 :selectOnTab="true">
</v-select>

设置:value为price_currency计算值。在单元测试中，我可以使用 find 方法来v-select返回元素，但因为它是一个 vue 组件而不是实际的<select>元素value，所以没有设置，这意味着我无法测试它。

如何为上述内容编写单元测试v-select以确认该字段设置为 的计算值price_currency？此外，我想测试price_currencyv-select 上的值何时更新，但可能一旦我看到测试值的示例，其余的就会到位。

这似乎是一个相当简单的测试，但我在文档或在线任何地方都找不到如何完成此操作的好示例。

对于我的单元测试，我使用 VueTestUtils 和 Jest。

我如何能够为我的规格模拟 $parent ？在我的组件中使用shallowMount 时，我总是得到未定义的clientWidth/clientHeight。我已经尝试将 $parent 模拟为一个对象，其中 $el 作为键，另外两个嵌套键用于 clientWidth 和 clientHeight，但这并没有按预期工作。我无法弄清楚 parentComponent 的正确用法。

我有一个单一的文件组件，如下所示：

<template>
  <img :src="doSomething">
</template>

<script>
export default {
  name: "Foobar",
  data() {
    return {
      size: null
    };
  },
  computed: {
    doSomething() {
      # here is some string concatenation etc.
      # but not necessary for example
      return this.size;
    }
  },
  created() {
    let parent = this.$parent.$el;
    this.size = `size=${parent.clientWidth}x${parent.clientHeight}`;
  }
};
</script>

创建 vue 应用程序如下所示：

import Vue from "vue";
import Foobar from "./Foobar";

const vueEl = "[data-vue-app='foobar']"; …

如果我有图片

<img class="pineapple" ref="pineapple" src="pineapple.jpg" />

我可以使用 $ref

expect(wrapper.find($refs.pineapple).exists()).toBe(true)

代替

expect(wrapper.find('.pineapple').exists()).toBe(true)

我目前正在处理一个遗留的 Vue 项目。我们正在使用带有选项 API 的 Vue 2.xw/Typescript。

我想提出切换到 Vue 组件 API 的案例，到目前为止，我认为这是一个非常引人注目的案例 - 除了一个缺点。

那就是——我们现有的测试失败了。具体来说，这是因为两个原因：

1. 使用来自 '@vue/testUtils' 的 mount() 的测试不能使用 .setData() 方法手动设置数据（因为可观察状态是从 setup() 返回的，并且不再存在于数据中）；

例子：

// FIXME: This test fails because Vue Test Utils .setData does not work
// with the new composition API.
it("renders by default", async () => {
  await wrapper.setData({
    crosshairCoordinates: [{ x: 0, y: 0 }],
  });
  expect(wrapper.findAllComponents(ChartTooltip).length)
    .toBe(1); // -> expected 1, recieved: 0
});

2. 通过 findComponent() 和 ref 字符串访问 dom 中的组件或 HTML 元素的测试不再找到新样式的 Refs …

我正在使用 vue test utils 进行简单的单元测试。但它不起作用。我不知道....帮帮我

我安装了这些东西.....

> $ npm i -D jest @vue/test-utils vue-jest jest-serializer-vue babel-jest babel-core@bridge

> $ npm i -D @babel/core @babel/preset-env

我做了jest.config.js文件

module.exports = {
  moduleFileExtensions: [
    'vue',
    'js'
  ],

  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },

  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist'
  ],

  testURL: 'http://localhost',

  transform: {
    '^.+\\.vue$' : 'vue-jest',
    '^.+\\.jsx?$' : 'babel-jest'
  }
}

和测试/Parent.test.js

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

test('Mount', () => {
  const wrapper = mount(Parent)
  expect(wrapper.html()).toBe('')
})

但是 npm …