Vue+Jest+Vue-Test-Utils

这两天jest学习总结，应该比较通俗易懂，就不给解释看注释吧
vue代码

<!--  -->
<template>
    <div class="MyTestDemo1">
        <div class="a" @click="foo"></div>
        <p></p>
        <a></a>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
    // 这里存放数据
        return {
            name: 'ch',
            num: 1,
            testName: '',
        };
    },
    props: {
        msg: String,
    },
    // 监听属性 类似于data概念
    computed: {
        getName() {
            return `${this.name}haha`;
        },
    },
    // 监控data中的数据变化
    watch: {
        name(value) {
            this.testName = `${value}watch`;
        },
    },
    // 方法集合
    methods: {
        sayHello() {
            return 'Hello';
        },
        foo() {
            this.num = 2;
        },
        foo1() {
            this.foo2();
        },
        foo2() {

        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
        <style lang="scss" scoped>
//@import url(); 引入公共css类
</style>

单元测试

import { shallowMount } from '@vue/test-utils';
import MyTestDemo1 from '@/components/MyTestDemo1.vue';

describe('测试vue组件', () => {
    let wrapper = shallowMount(MyTestDemo1);
    let spy;
    beforeEach(() => {
        //jest.fn()语法糖，监听是否被调用
        spy = jest.spyOn(wrapper.vm, 'foo2');
    });
    afterEach(() => {
        wrapper.destroy();
        spy.mockClear();
    });
    // test <-->it
    test('测试方法', () => {
        console.log(wrapper.vm.sayHello());
        expect(wrapper.vm.sayHello()).toEqual('Hello');
        console.log('测试方法');
    });

    test('测试data', () => {
        console.log(wrapper.vm.name);
        expect(wrapper.vm.name).toEqual('ch');
        console.log('测试data');
    });

    test('测试dom', () => {
        console.log(wrapper.contains('div'));
        expect(wrapper.contains('div')).toBe(true);
        expect(wrapper.find('.a').exists()).toBeTruthy();
        expect(wrapper.find('p').exists()).toBeTruthy();
        console.log('测试dom');
    });
    /**
     * .not !
     * .toEqual() ==
     * .toHaveLength 字符串和数组长度
     * .toThrow 是否按照预期抛出异常
     * .toMatch 传入一个正则表达式，它允许我们用来进行字符串类型的正则匹配
     * .toBeTruthy()  返回true
     * .toBeFalsy()  返回false
     */
    test('测试text', () => {
        console.log(wrapper.text());
        console.log(wrapper.name());
        expect(wrapper.contains('div')).toBe(true);
        console.log('测试text');
    });

    it('测试props', () => {
        wrapper = shallowMount(MyTestDemo1, {
            propsData: {
                msg: 'HelloWorld',
            },
        });
        expect(wrapper.props().msg).toEqual('HelloWorld');
        console.log('测试props');
    });
    it('测试@click', () => {
        //jest.fn() 模拟方法
        const mockFn = jest.fn();
        // setMethods方法用mock函数代替真实的方法，然后就可以断言点击按钮后对应的方法有没有被触发、触发几次、传入的参数等等。
        wrapper.setMethods({
            foo: mockFn,
        });
        // 触发按钮的点击事件
        wrapper.find('.a').trigger('click');
        // toHaveBeenCalled别名toBeCalled
        expect(mockFn).toHaveBeenCalled();
        console.log('测试@click');
    });
    it('测试comuted', () => {
        expect(wrapper.vm.getName).toEqual('chhaha');
    });
    it('测试comuted demo 2', () => {
        wrapper.vm.name = 'demo';
        expect(wrapper.vm.getName).toEqual('demohaha');
    });
    it('测试监听器', () => {
        wrapper.vm.name = 'demo';
        wrapper.vm.$nextTick(() => {
            expect(wrapper.vm.testName).toEqual('demowatch');
            done();
        });
    });
    it('spyOn测试', () => {
        wrapper.vm.foo1();
        expect(spy).toBeCalled();
        console.log('spyOn测试');
    });
});

参考资料

jest官网
vue-test-util官网
jest.fn jest.mock jest.spyOn
Jest结合Vue-test-utils使用的初步实践