react中使用Jest+Enzyme的单元测试(详细)

最新推荐文章于 2025-05-31 21:35:58 发布

苏墨晨

最新推荐文章于 2025-05-31 21:35:58 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_36529459/article/details/82823569

本文旨在教会React开发者如何使用Jest和Enzyme进行单元测试。从创建React应用开始，逐步讲解如何配置和编写测试代码，包括删除不必要的初始文件、安装测试依赖、设置测试配置文件、编写测试用例等步骤。通过测试表格组件为例，展示了如何检查特定元素的存在，以确保测试覆盖率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react中还是在编写vue的项目的时候，不管是大型项目亦或是中小型项目，我觉得编写单元测试是一个很好的习惯，我在看了好多博客之后，发现，大多数博客都是在写相关配置等问题，而并没有详细传授用户如何使用单元测试，因此，我写这篇文章的目的也是让react用户学会使用单元测试。我就从头教下如何使用。

在使用create-react-app的命令下载了react脚手架后，用户可以将src目录下的App.js和index.js以外的文件全部删去，但是App.js我进行了相关的修改，我在App.js中添加了一个table的代码,代码如下（仅放了部分代码,因为这是接下来需要进行单元测试的代码）:

<table className='table'>
    <thead>
        <tr>
            <th>Items</th>
        </tr>
    </thead>
</table>

写完了相关的主代码内容，但是在接下来编写单元测试代码之前需要安装react相关的单元测试代码（该版本是针对react 16的,若需要安装15版本的,将相应的16改为15即可）:

npm i --save-dev enzyme react-test-renderer enzyme-adapter-react-16

安装完了依赖，打开我们的react-app项目文件，到目前位置，我们的src目录下仅有App.js和index.js（如果用户按我起初所说的步骤）,这时，新建一个setTests.js，该文件需要简单的配置，配置代码很简单，如下所示:

import Enzyme from 'enzyme'
import Adapter from

最低0.47元/天解锁文章

200万优质内容无限畅学