如何使用 jest 对 Vue.js 组件中的方法进行单元测试

Question

我正在尝试对组件方法进行单元测试。问题 没有说明如何从单元测试访问组件方法。

具体来说，鉴于下面的 Vue 组件，我如何从我的单元测试访问 doSomeWork()？

Vue组件：

<template>
    <div id="ThisStuff">
        <span>
            Some other stuff is going on here
        </span>
    </div>
</template>

<script>
    import foo from 'bar'

    export default {
        props: {
            ObjectWithStuffInIt: [
                {
                    id: 1
                    bar: false
                },
                {
                    id: 2
                    bar: false
                },
            ]
        },
        data: {
            foo: "foo"
        },
        methods: {
            doSomeWork: function() {
                for (var i = 0; i < ObjectWithStuffInIt.length; i++) { 
                    if (foo === "diddly") {
                        ObjectWithStuffInIt[i].bar = true;
                    }
                }
            }
        }
    }
</script>

我的测试代码：

import {createLocalVue, shallow} from 'vue-test-utils'
import ThisVueFile.test.js from '../../thisPlace/ThatPlace/ThisVueFile.vue'
import Vuex from 'vuex'

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

describe('ThisVueFile.test.js', () => {
    let user;
    let store;

    beforeEach(() => {
        let getters = {
            user: () => user
        }

        store = new Vuex.Store({ getters })
    })

    // I need to fill propsData: with some local data here 
    //     because it is server data
    // I need to have access to the method
    // I need to use local data for `foo` in the test. 

    it(' When foo is set to -diddly- then set bar to true ', () => {
        foo = "diddly";
        // run the method in the component here 
        doSomeWork();

        expect(OjbectWithStuffInIt[0].bar.equals(true));
    })
})

Answer 1

调用组件方法

包装器通过其 vm 属性 提供对组件实例的访问，因此您可以直接调用该方法：

wrapper.vm.doSomeWork()

设置props

• 安装选项（传递给 shallowMount() or mount()) include the propsData 属性 可用于在安装前初始化组件的 props。
• 您也可以在安装组件后使用包装器的 setProps()。

示例：

it('...', () => {
  const wrapper = shallowMount(MyComponent, {
    propsData: {
      myItems: [
        { id: 200, bar: false },
        { id: 300, bar: false }
      ]
    }
  });

  // OR
  wrapper.setProps({
    myItems: [
      { id: 400: bar: true }
    ]
  })
})

修改组件数据属性

• 安装选项包括 data 属性 可用于在安装前初始化组件数据。
• 您还可以在组件安装后使用包装器的 setData()。
• 您可以直接通过包装器的 vm 属性.
访问组件的数据 属性

示例：

it('...', () => {
  const wrapper = shallowMount(MyComponent, {
    data() {
      return {
        foo: 1
      }
    }
  });

  // OR
  wrapper.setData({ foo: 2 })

  // OR
  wrapper.vm.foo = 3
})

完整示例

总而言之，您的测试可能与此类似：

import { createLocalVue, shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent'

describe('MyComponent', () => {
  it('When foo is set to -something-, set bar to true', () => {
    const myItems = [
      { id: 200, bar: false },
      { id: 300, bar: false }
    ]
    const localVue = createLocalVue()
    const wrapper = shallowMount(MyComponent, {
      localVue,
      propsData: {
        myItems
      }
    })

    wrapper.vm.foo = 'something'
    wrapper.vm.doSomeWork()

    expect(myItems[0].bar).toBe(true)
  })
})

demo