开头写着：单元测试是很多人比较模型的一种方式，是一种促进开发或者提高产品质量的手段，我画一张图，大家都能看懂其实单元测试就是先写单元测试代码，然后用单元测试框架模拟环境（比如浏览器），然后运行你的代码，看代码是否按预期运行。为了减少文章篇幅，对初学者更友好。所以这里我使用我开源的通用脚手架，集成TypeScript+JavaScript混合开发，Jest框架，测试React组件，Enzyme，dva，Antd按需加载等主流技术~推荐大家使用我在npm上的开源脚手架叫:ykj-cli使用步骤：npmiykj-cli-g或yarnaddglobalykj-cliykjinitproject_namecdproject_nameyarn&&yarndev打开就可以看到页面了~如果有什么问题或者建议，请告诉我，以及我会马上改善。欢迎使用.我已经集成了PWA等功能，我会根据需要添加更多的可选功能，开始编写第一个单元测试代码。所有测试代码必须在测试文件夹中。我们的脚手架帮助我们创建了一个新的应用程序。test.tsx文件（必须以tsx结尾，因为要测试React组件）一个合格的React项目，组件必须以tsx结尾，工具文件以ts结尾，声明文件以.d.ts结尾首先导入enzyme和Reactand对应的ComponentimportAppfrom'../src/app';从“酶”导入{mount}；从“反应”导入反应；编写单元测试代码：test('logintest',async()=>{console.log('App-mountComponenttestfunctionbegin');});每个测试都是一个单独的测试函数。我们使用打包好的脚手架打包命令来测试，看看yarn测试有没有反应。为什么？因为里面没有写单元测试代码，此时我们根据脚手架的实际文件编写单元测试代码importAppfrom'../src/routers/home';import{mount}from'enzyme';从'react'导入React;从'enzyme-to-json'导入toJson;//做快照测试('登录测试',async()=>{console.log('App-mountComponent测试函数开始');constwrapper=mount();expect(wrapper.find('.login_fade_in').children().length).toBe(8);console.log('App-mountComponenttestfunctionstop--success');});这个yarntest开始测试的时候报错，因为App组件连接的是dva的store数据中心，这里没有传入props那么我们可以模拟进货商店吗？最简单的方法，尝试传入一个空对象importAppfrom'../src/routers/home';import{mount}from'enzyme';importReactfrom'react';importtoJsonfrom'enzyme-to-json';//做快照测试('登录测试',async()=>{console.log('App-mountComponenttestfunctionbegin');constwrapper=mount();expect(wrapper.find('.login_fade_in').children().length).toBe(8);console.log('App-mountComponenttestfunctionstop--success');});yarnteststartupresultsfound报错，测试失败，那我们得想办法让它通过测试，所以我们要看看App.tsx组件需要什么props~importReact,{Fragment}from'react';import{Button}from'antd';import{connect}from'dva';import'./index.less';interfaceProps{history:any;只读计数：数字；派遣：功能；我的脚手架是支持TS和JS混合开发的，赶快看看需要传入四个必要的参数，那我们来模拟一个copy，这次来认真测试一下~importAppfrom'../src/routers/login';从'enzyme'导入{mount};从'react'导入React;从'enz'导入toJsonyme到json';//做一个快照测试('logintest',async()=>{console.log('App-mountComponenttestfunctionbegin');constwrapper=mount({}}/>);expect(wrapper.find('.container').length).toBe(1);console.log('App-mountComponenttestfunctionstop--success');});上面单元测试代码的意思是：挂载登录组件，传入Name和changeShowCount函数作为props，检测挂载的树结构中容器类名的元素长度为1这里??：如果是断言，需要判断值，使用toBe。如果对象需要比较，使用toEqualyarn测试，让测试结果通过。这是最简单的单元测试编写。通常建议先根据需求编写单元测试代码，再编写业务代码，再生成单元。测试报告yarntest-c此时可以看到在根目录下的coverage文件夹下多了一个lcov-report文件夹。进入后我们直接打开里面的index.html文件，就可以看到单元测试报告了。里面有一些像树枝。覆盖率、函数、代码函数覆盖率等其实像Jest一样用起来更方便。核心思想是使用测试框架来运行业务代码，然后使用单元测试代码来测试你的业务代码。前端单元测试和后端单元测试的概念其实是一样的。其他的API我这里就不解释了。有兴趣的可以使用ykj-cli的脚手架进行测试。上面的例子都在里面。非常方便前端单元测试。还有一个非常重要的。一点是生成页面快照。为什么要生成页面快照？您可以先在某个时间生成页面快照并保存。然后在一些代码运行完之后，再次生成一个快照，和之前的快照进行对比，这样就可以判断你中间的这部分代码是否对UI造成了影响，从而判断有没有bug。页面快照：从'../src/routers/login'导入App；从'enzyme'导入{mount，shallow}；从'react'导入React；从'enzyme-to-json'导入toJson；//做快照测试('logintest',async()=>{console.log('App-mountComponenttestfunctionbegin');constwrapper=shallow({}}/>);//toJson(wrapper,{//noKey:false,//mode:'deep',//});expect(wrapper).toMatchSnapshot()console.log('App-mountComponenttestfunctionstop--success');});这里expect(wrapper).toMatchSnapshot()这行代码帮我们在test文件夹下生成了__snapshots__文件夹。如果测试代码中有任何操作改变了这个页面，就会报错，单元测试失败如下希望大家也仔细阅读一下常见的单元测试代码示例。编写单元测试可能比业务代码更难。本文将指导您入门。没有问题。其他的API需要你多看文档，多学习，多写。推荐一些资料：http://caibaojian.com/scb/enzyme.html原文很累，不过觉得有帮助，给我点个赞，关注前端高峰公众号。把文章推荐给需要的人
