jest 纯函数单测写法

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

// ExecuteHost.vue








// 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官方文档

更多单测写法欢迎补充！