用Jest编写单元测试

最新推荐文章于 2024-09-20 15:20:51 发布

Creabine

最新推荐文章于 2024-09-20 15:20:51 发布

阅读量929

点赞数 1

分类专栏：单元测试文章标签：单元测试 javascript 前端

本文链接：https://blog.csdn.net/Creabine/article/details/124841542

版权

本文介绍了如何使用Jest为一个公共的Calendar组件编写单元测试，强调了单元测试在减少后续迭代中bug的重要性。主要内容包括Jest的目录结构、快照测试的原理及其在确保组件UI稳定性中的作用，以及简单的测试用例示例。

摘要由CSDN通过智能技术生成

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'))

最低0.47元/天解锁文章