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

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

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

    

        

            
Items
        
    

写完了相关的主代码内容，但是在接下来编写单元测试代码之前需要安装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 'enzyme-adapter-react-16'

Enzyme.configure({
    adapter:new Adapter()
})

在设置好配置文件后，我们新建一个App.test.js文件，该文件就是我们来编写单元测试代码所需要的文件，我将该文件的代码来进行简单的讲解。

1、首先先设计一个简单的架构，将相关文件导入，并编写describe函数和it函数

import App from './App'
import React from 'react'
import {shallow } from 'enzyme'

describe('App',()=>{
    it('should hava the `th` "Items"',()=>{
        const wrapper=shallow(
            
        );
        expect(
           
        ).toBe(true)
    });
});

在上面的代码中，我们导入了相关配置文件App即我们之前写好的代码文件，也是我们需要进行测试的文件，shallow函数是我们需要它来进行浅组件渲染，缺一不可。

2、结构写好了，接下来，我们来编写测试语句，我在第一张图片中的代码即table代码中放置了一段代码,即:

Items

我们需要做的就是来检测他是否存在。

3、在wrapper常量中添加我们需要测试的文件

const wrapper=shallow(
    
);

4、在导入了文件之后，我们就要做相关测试了，即检测是否存在我需要的元素代码，因此，在expect中编写相关代码，同时，有一个toBe函数，他的意思是我们在做某个步骤的时候是对还是错。

expect(
   wrapper.contains(Items)
).toBe(true)

因为我将App组件放在了wrapper的shallow函数中，在加上contains函数来检测，即可达到目的。

5、最后一步就是检测测试代码了，cd到项目代码下，输入npm test即可,结果如下: