现介绍jest 纯函数单测的写法。

// ExecuteHost.vue
<template>
    <div class="host-wrapper">
        <h3>第{{ group }}组机器：</h3>
        <div>执行机器：{{ taskList[0] ? taskList[0].exec_ip : '' }}</div>
        <div>剔除机器：{{ getKickHost() }}</div>
    </div>
</template>


<script>
export default {
    props: {
        taskList: {
            type: Array,
            default: () => []
        },
        group: {
            type: Number,
            default: () => 1
        }
    },
    methods: {
        getKickHost() {
            let kickHostStr = this.taskList.reduce((accu, cur) => {
                return accu + cur.kick_host + ',';
            }, '');
            let kickHostArr = kickHostStr.split(',').filter(item => item !== '');
            return Array.from(new Set(kickHostArr)).join(',');
        }
    }
};
</script>

<style scoped>
.host-wrapper {
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 5px 5px 2px #eee;
    height: 30vh;
    margin: 20px 20px 20px 0;
    padding: 20px;
    overflow: scroll;
}
</style>


// executeHost.spec.js
import {shallowMount} from '@vue/test-utils';
import ExecuteHost from '../../../../src/views/cmdopt/execution/ExecuteHost';

describe('ExcecuteHost.vue', () => {
    it('test get kick host', () => {
        const taskList = [];
        const group = 1;
        const wrapper = shallowMount(ExecuteHost, {
            propsData: {taskList, group}
        });
        expect(wrapper.vm.getKickHost()).toBe('');
    });

    it('test get kick host', () => {
        const taskList = [
            {
                'kick_host': 'abc.com'
            }, {
                'kick_host': 'abc.com'
            }
        ];
        const group = 1;
        const wrapper = shallowMount(ExecuteHost, {
            propsData: {taskList, group}
        });
        expect(wrapper.vm.getKickHost()).toBe('abc.com');
    });

    it('test get kick host', () => {
        const taskList = [
            {
                'kick_host': 'abc.com'
            }, {
                'kick_host': 'bcd.com'
            }
        ];
        const group = 1;
        const wrapper = shallowMount(ExecuteHost, {
            propsData: {taskList, group}
        });
        expect(wrapper.vm.getKickHost()).toBe('abc.com,bcd.com');
    });

    it('test get kick host', () => {
        const taskList = [{
            'kick_host': 'abc.com,bcd.com'
        }, {
            'kick_host': 'abc.com'
        }];
        const group = 1;
        const wrapper = shallowMount(ExecuteHost, {
            propsData: {taskList, group}
        });
        expect(wrapper.vm.getKickHost()).toBe('abc.com,bcd.com');
    });

    it('test get kick host', () => {
        const taskList = [{
            'kick_host': 'abc.com,bcd.com'
        }, {
            'kick_host': 'abc.com'
        }, {
            'kick_host': 'bcd.com,def.com'
        }];
        const group = 1;
        const wrapper = shallowMount(ExecuteHost, {
            propsData: {taskList, group}
        });
        expect(wrapper.vm.getKickHost()).toBe('abc.com,bcd.com,def.com');
    });
});

代码解释：

shallowMount(), 创建一个包含被挂载和渲染的 Vue 组件的 wrapper， wrapper的介绍见[https://vue-test-utils.vuejs.org/zh/api/wrapper/#%E5%B1%9E%E6%80%A7]
我们可以通过wrapper.vm 来访问一个实例所有的方法和属性。
例如上述代码通过 wrapper.vm.getKickHost() 来访问组件中的getKickHost 方法
shallowMount有两个参数，第一个参数为component，第二个参数为options选项配置（可选）。选项的介绍见[https://vue-test-utils.vuejs.org/zh/api/options.html]

options配置

options配置可包含以下参数：
context
data
slots
scopedSlots
stubs
mocks
localVue
attachTo
attachToDocument
propsData
attrs
listeners
parentComponent
provide

除了上方列出的选项，options 对象还可以包含任何 new Vue ({ /options here/ }) 调用时的有效选项。 当通过 mount / shallowMount 挂载时，这些选项将会合并入组件现有的选项中。
例如在上述代码中，
const wrapper = shallowMount(ExecuteHost, {
propsData: {taskList, group}
});
使用propsData来指定组件被挂载时组件实例的prop。

单测运行结果

在我们的package.json文件中定义了scripts：

image.png

image.png

那么我们执行 npm run test:unit 之后，就能看到单测的运行结果：
上述只是最简单的纯函数的单元测试的写法，除此之外，jest还可以测试ui界面、dom事件、异步行为等，详见文档：https://vue-test-utils.vuejs.org/zh/

参考文档

vue单元测试官方文档
单测写法参考
jest官方文档

更多单测写法欢迎补充！