以vue框架为例（其他框架雷同），jest安装过程不再赘述，教程一搜一大把，本文介绍case编写过程中的粗略心得。

1、运行

npm run test //运行jest.config.js中声明的所有匹配文件
npm run test filename //运行指定文件filename

2、case编写

添加组件：
可以在jest.config.js文件中添加需要进行单元测试的组件路径。
用法示例：

describe('说明', () => {
    //options表示当前测试中数据，包含props,data,mock等
    const wrapper=shallowMount(componentName, options);

    it('说明', () => {
            expect(received).toBe(expected);
    });

    it('', () => {
            //页面元素渲染判定
            expect(wrapper.classes('className')).toBe(true);
            expect(wrapper.contains('.className')).toBe(true);
    });

    it('', () => {
            //点击事件判
            wrapper.find('.className').trigger('click');
            expect(received).toBe(expected);
    });

    ...
});

复制代码

复杂一些的，如接口测试：
首先使用mock模拟接口
import { requestName } from ‘url_url’;
jest.mock(‘url_url’);
在文件中定义接口请求成功与失败的方法，并在测试组件中使用定义的方法。
ps：
如在util.js中重定义接口请求成功方法serviceResolve和接口请求失败方法serviceReject如下，

export const serviceResolve = data => {
    return Promise.resolve({
        ...data,
        resultCode: data.retCode,
        resultString: data.retString
    });
};
export const serviceReject = data => {
    return Promise.reject({
        type: 'server',
        data: {
            ...data,
            resultCode: data.retCode,
            resultString: data.retString
        }
    });
}

复制代码

具体使用如下：

it('request success', () => {
	let mockSuccessService = {
		...mockService,
		ret: 0
	};
	const requestSuccessMock = serviceResolve(mockSuccessService);
	requestService.mockResolvedValue(requestSuccessMock);
	requestService().then(() => {
		expect(received).toEqual(expected);
	});
});

it('request fail', done => {
    let mockFailService = {
        ...mockService,
        # 定义的请求错误码
        ret: '500'
    };
    const requestFailMock = serviceResject(mockFailService);
    requestService.mockRejestValue(requestFailMock);
    setTimeout(() => {
        expect(received).toEqual(expected);
        done();
    });
    # 或者使用另一方法
    requestService().catch(() => {
        expect(received).toEqual(expected);
    });
});

复制代码