Vue 算法的笑话测试

【问题标题】：Vue jest test for algorithmVue 算法的笑话测试
【发布时间】：2020-11-28 05:24:13
【问题描述】：

我有一个看起来像这样的组件。我将如何编写一个 vue jest 测试来满足这些条件？

<template>
  <div align="center">
    <button @click="Tests()">Tests</button>
    <button @click="Benchmark()">Benchmark</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      result: null,
    };
  },
  props: {
    msg: String,
  },

};
</script>

【问题讨论】：

标签： unit-testing vue.js jestjs

【解决方案1】：

使用@vue/test-utils，你可以shallowMount组件得到一个包装器，然后通过包装器的vm属性访问smallestInt()和result：

// MyComponent.spec.js
import MyComponent from '@/components/MyComponent.vue'
import { shallowMount } from '@vue/test-utils'

describe('MyComponent.smallestInt()', () => {
  it('case 1', () => {
    const wrapper = shallowMount(MyComponent)
    const A = [1, 3, 6, 4, 1, 2]
    wrapper.vm.smallestInt(A)
    expect(wrapper.vm.result).toBe(5)
  })

  it('case 2', () => {
    const wrapper = shallowMount(MyComponent)
    const A = [-1, -3]
    wrapper.vm.smallestInt(A)
    expect(wrapper.vm.result).toBe(1)
  })
})

【讨论】：