用Jest编写单元测试

Jest

到新公司的第一个任务是写个公共的Calendar组件，还挺有意思的。写完之后，作为公共组件，当然要有单测，单侧覆盖率也是越高越好。充分的单测能够降低后续迭代造成bug的几率。

所以来简单记录下使用jest的过程，文本主要讲大致用法，具体细节还是看文档吧

目录结构

----- Component  // 你的组件目录
	index.tsx  // 当前组件源码
	...
	---- __test__ // 单测相关目录
		---- index.test.jsx // 单测编写
		---- __snapshots__ // 快照目录
			---- index.test.tsx.snap // 快照	

关于快照 snapshot

snapshot用于确保组件的UI不会发生意外的更改。snapshot test 用来确保组件有被正确的渲染。通常是先渲染组件，然后用渲染结果跟之前生成的快照文件惊醒比较：

• 如果不匹配，则测试不通过
• 如果主动更新了组件，则要更新快照

简单用例

// 首先引入要测试的组件及其依赖
import React from 'react';
import dayjs from 'dayjs';
import {
    mount } from 'enzyme';
import {
    act } from 'react-dom/test-utils';
import MockDate from 'mockdate';
import toJson from 'enzyme-to-json';
import Calendar from '../index';
import styles from '../Calendar.styl';
import {
    throttle } from '../util';
import {
    CalendarPropsRef } from '../types';

// mock today
// 这里的作用是使用mockdate包，将后边的所有 new Date()的值改为 new Date('2022-05-02')
MockDate.set(new Date('2022-05-02'))