前端自动化测试——Jest测试框架应用

沪小胖纸

这是第 326篇不掺水的，想要了解更多，请戳下方卡片关注我们吧～前端自动化测试——Jest测试框架应用http://zoo.zhengcaiyun.cn/blog/article/jest什么是自动化测试在软件测试中，自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后，测试自动化可以自动执行的一些重复但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言，测试自动化是至关重要的。 ——来自 WiKi 百科为什么要用前端自动化测试随着前端项目的发展，其规模和功能日益增加。为了提高项目的稳定性和可靠性，除了需要测试工程师外，前端自动化测试也成为了不可或缺的一环。采用前端自动化测试可以有效地提高代码质量，降低出错的概率，从而使项目更加健壮和更易维护。前端自动化分类和思想单元测试又称为模块测试 ，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。在前端中，一个函数、一个类、一个模块文件，都可以进行单元测试，测试时每个模块都是互不干扰的。单元测试集成测试是在单元测试的基础上，测试再将所有的软件单元按照概要设计规格说明的要求组装成模块、子系统或系统的过程中各部分工作是否达到或实现相应技术指标及要求的活动。用户的开始操作到结束操作这一整个行为流程可以当作集成测试。集成测试TDD 测试驱动开发（Test Driven Development）开发流程：TDDTDD 是趋向于白盒测试，需要开发者对当前编写的模块思路足够清晰。优势：长期减少回归 bug。代码质量更好，可维护性高。测试覆盖率高（先写测试用例，再实现功能）。错误测试代码不容易出现（测试在开发之前执行）。BDD 行为驱动开发（Behavior Driven Development）开发流程：BDDBDD 趋向于黑盒测试，只关注用户的一整套行为流程下来是否会成功。优势：对于用户行为的整个流程把控程度较高，对于开发人员来说这样安全感高。如何自己写非框架测试用例不使用测试框架，我们该如何测试自己的模块呢？如果我们想要测试下面的代码，应该需要两个值，一个是 期望值 ，另一个是函数执行的 结果值 ，我们需要对比两个值来进行判断当前函数是否通过了测试用例。//index.jsfunctionZcyZooTeam(str){return'Zcy'+str;}需要下面的 if / else 进行判断当前的期望值 value 和结果值 result 是否相等，如果相等说明我们的测试用例通过了。我们将这两段代码复制到浏览器中，下面的执行不会通过，并会抛出错误，只有我们将传入值改为 ZooTeam 才会成功执行。//no-jest.jsconstresult=ZcyZooTeam('Zero');constvalue='ZooTeam';if(result!==value){throwError(`ZcyZooTeam结果应为${value},但实际结果为${result}`);}是否能简化？如果我们有多个函数需要测试，你应该不想写许多个 if / else 代码块吧？所以我们要将上面的代码块进行优化成一个函数。//no-jest.jsfunctionexpect(result){return{//用于判断是否为期望值toBe(value){if(result!==value){throwError(`结果应为${value},但实际结果为${result}`);}console.log('测试通过！');}}}//执行测试expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');经过上面的封装，我们就可以只写一行代码进行测试了！如何能清晰地看到我测的是哪个呢？虽然上面的封装只需要书写一行代码就可以测试了，但是我们不知道执行结果和测试用例之间的对应关系，我们需要输出的文字来告诉我们当前是哪个测试用例执行了。//no-jest.js//再封装如下方法functiontest(msg,fn){try{fn();console.log(msg+'测试通过！');}catch(error){console.log(msg+'测试未通过！'+error);}}test('测试ZcyZooTeam',()=>{expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')})成功和失败都会进行提示，这样我们就可以知道当前是哪个测试用例成功/失败了。Jest 的书写方式也是同上，如果上面的一整套代码了解了的话，你已经可以写 Jest 的测试脚本了，下面将进入 Jest 的配置。如何使用 Jest 测试框架进行自动化测试？主流的前端自动化测试框架JasmineJasmine 优点：易于学习和使用，支持异步测试，可以在浏览器和 Node.js 环境中运行，可以生成易于阅读的测试报告，可以与其他库和框架集成。MOCHAMOCHA 优点：支持异步测试和 Promise ，可以在浏览器和 Node.js 环境中运行，可以与其他库和框架集成，可以生成易于阅读的测试报告，可以使用各种插件和扩展来增强其功能。JestJest 是针对模块进行测试，单元测试对单个模块进行测试，集成测试对多个模块进行测试。Jest 优点：速度快（单模块测试时，执行过的模块不会重复执行），API简单，易配置，隔离性好（执行环境相对隔离，每个文件单独隔离互不干扰），监控模式（更灵活的运行各种测试用例），适配编辑器多，Snapshot（快照），多项目运行（后台前台测试用例并行测试），生成可视化覆盖率简单，Mock丰富。准备工作 —— Jest 的配置npmijest--save-D//初始化jest的配置文件npxjest--init//你将在那个环境进行测试，回车即可选择//第一个是node环境、第二个是浏览器环境Choosethetestenvironmentthatwillbeusedfortesting-Usearrow-keys.Returntosubmit.nodejsdom(browser-like)//是否需要jest生成测试覆盖率报告DoyouwantJesttoaddcoveragereports(y/N)//是否需要在测试结束后清除模拟调用Automaticallyclearmockcallsandinstancesbetweeneverytest(y/N)//创建jest.config.js文件Configurationfilecreatedat/Users/zcy1/Desktop/demo/auto-test-jest-demo/jest.config.js以上方法执行结束后，会生成一个 jest.config.js 文件，里面包含了 Jest 的配置项，每个配置项都会带有描述，在初始化的两个配置也会体现在配置文件中使用 babel 转换来使用 ES6 形式的导入和导出//.babelrc//如果想用es6的形式导出，需要使用babel插件进行转换//@babel/core@babel/preset-env//创建.babelrc文件//为了在node环境下使用es6的导出，需要使用babel进行转换{//设置插件集合"presets":[//使用当前插件，可以进行转换//数组的第二项为插件的配置项["@babel/preset-env",{//根据node的版本号来结合插件对代码进行转换"targets":{"node":"current"}}]]}配置好后需要将 package.json 中的 test 命令的 value 改为 jest --watchAll ，代表监听所有有修改的测试文件，然后控制台执行 npm run test 就可以执行测试用例了。Jest 启动时会进行如下流程npm run testjest (babel-jest) 检测当前环境是否安装了 babel如果安装了则会去 babelrc 中取配置取到后执行代码转换最后再执行转化过的测试用例代码如何生成一个测试用例覆盖率报告？经过上面的 Jest 配置，我们就可以通过下面的 npx 命令来生成测试覆盖率报告了npxjest--coverage会生成一个名为 coverage 的文件夹，打开里面的 html 就可以看到你的覆盖率，其中 Statements 是语句覆盖率（每个语句是否执行），Branches是分支覆盖率（每个 if 块是否执行），Functions是函数覆盖率（每个函数是否执行），Lines是行覆盖率（每行是否执行），通过修改 coverageDirectory 的值可以改变测试覆盖率生成文件夹的名字Jest 基础匹配器上面我们说过了，Jest的用法和我们封装的那几个函数是一样的，都是执行 test 函数并向函数中传递参数，第一个参数是你当前测试用例的描述，第二个参数是需要执行的匹配规则。匹配器toBetoBe 匹配器，期待是否与匹配器中的值相等 相当于 object.is ===//jest.test.jstest("测试",()=>{expect(1).toBe(1);//通过consta={name:'Zero'};//因为a的引用地址，和toBe中对象的引用地址不一致，会导致测试不通过，需要使用其他的匹配器expect(a).toBe({name:'Zero'});//失败});toEqualtoEqual 匹配器，只会匹配对象中的内容是否相等。//jest.test.jstest('测试对象相等',()=>{consta={name:'Zero'};expect(a).toEqual({name:'Zero'});//断言})toBeNulltoBeNull 匹配器，可以判断变量是否为 null ，只能匹配 null。//jest.test.jstest('测试是否为null',()=>{consta=null;expect(a).toBeNull();})toBeUndefinedtoBeUndefined 匹配器，可以判断变量是否为 undefined ，只能匹配 undefined。//jest.test.jstest('测试是否为undefined',()=>{consta=undefined;expect(a).toBeUndefined();})toBeDefinedtoBeDefined 匹配器，希望被测试的值是定义好的。//jest.test.jstest('测试变量是否定义过',()=>{consta='';expect(a).toBeDefined();})toBeTruthytoBeTruthy 匹配器，可以判断变量是否为真值，会对非 bool 值进行转换。//jest.test.jstest('测试变量真值',()=>{consta='123';expect(a).toBeTruthy();})toBeFalsytoBeFalsy 匹配器，可以判断变量是否为假值，会对非 bool 值进行转换。//jest.test.jstest('测试变量假值',()=>{consta='';expect(a).toBeFalsy();})not修饰符not 匹配器，可以将匹配后的结果进行取反。//jest.test.jstest('测试变量不是假值',()=>{consta='1';expect(a).not.toBeFalsy();})toBeGreaterThantoBeGreaterThan 匹配器，期望值是否大于匹配器的参数。//jest.test.jstest('是否大于a的数字',()=>{consta=123;expect(a).toBeGreaterThan(1);})toBeLessThantoBeLessThan 匹配器，期望值是否小于匹配器的参数。//jest.test.jstest('是否小于a的数字',()=>{consta=0;expect(a).toBeLessThan(1);})toBeGreaterThanOrEqualtoBeGreaterThanOrEqual 匹配器，期望值是否大于或等于匹配器的参数。//jest.test.jstest('是否大于等于a的数字',()=>{//toBeLessOrEqual匹配器，与之相反consta=123;expect(a).toBeGreaterThanOrEqual(1);})toBeCloseTojs 中，浮点数值在相加时不准确，使用 toBeCloseTo 匹配器解决，趋近于 0.3。//jest.test.jstest('是否大于等于a的数字',()=>{consta1=0.1;consta2=0.2;expect(a1+a2).toBeCloseTo(0.3);})toMatchtoMatch 匹配器，匹配当前字符串中是否含有这个值，支持正则。//jest.test.jstest('是否包含day',()=>{consta='happyeveryday';expect(a).toMatch('day');})toContaintoContain 匹配器，判断当前数组中是否包含这个元素，Set 也可以使用。//jest.test.jstest('数组中是否包含zoo这个元素',()=>{consta=['zoo','ZooTeam','Zero'];expect(a).toContain('zoo');})toThrowtoThrow 匹配器，可以捕捉抛出的异常，参数为抛出的 error ，可以用来判断是否为某个异常。//jest.test.jsconsterror=()=>{thrownewError('error');}test('是否存在异常',()=>{expect(error).toThrow();})以上就是 Jest 中比较基础的匹配器，可以结合 初始化 + 配置 + 基础匹配器 进行书写测试用例。命令行操作在运行 npm run test 命令的时候，控制台执行测试用例成功或失败后都会像下面的图片一样出现几行提示，让你按对应的键进行操作。上面几个命令行的意思如下：1. f 只会跑测试未通过的用例，再次点击 f 会取消当前模式。我们使用一个失败的测试用例做一下示范按下 f 后，Jest 只会执行刚才失败的测试用例2. o 只监听已改变的文件，如果存在多个测试文件，可以开启，会与当前 git 仓库中的提交进行比较，需要使用 git 来监听哪个文件修改了，也可以将 --watchAll 改为 --watch 只会运行修改的文件。3. 根据测试用例文件的正则表达式，过滤需要执行的测试用例文件，No tests found, exiting with code 0 如果填写不对会进行提示，并不会跑任何测试用例。4. 根据测试用例描述的正则表达式，过滤需要执行的测试用例。5. 退出测试用例监听。异步测试在正常的业务开发中，项目中不只有同步代码，还会有请求接口的异步代码，异步代码的测试与同步代码有稍许不同，我们来看一下。编写一个接口请求//getData.jsexportconstgetData=(fn)=>{axios.get('/getData').then((res)=>{fn(res.data);})}对异步请求进行测试//jest.test.js//异步调用回调函数需要添加done参数，是一个函数test('getData返回结果为{success:true}',(done)=>{//此处代码无效，因为测试用例不会等待请求结束后的回调，测试用例执行完就直接结束了//getData1((data)=>{//expect(data).toEqual({//success:true//})//})getData1((data)=>{expect(data).toEqual({success:true})//需要在结束前调用done函数，Jest会知道到done才会结束，才可以正确测试异步函数done();})})需要注意的是，如果传入了形参 done，但是没有使用，这个测试用例就会处于一直执行的状态，直到执行超时。不执行done还可以结合 promise 进行使用//getData.jsexportconstgetData2=()=>{returnaxios.get('http://www.dell-lee.com/react/api/demo.json')}//jest.test.jstest('getData返回结果为{success:true}',()=>{//使用promise时需要return，在then中使用done也可以returngetData2().then(res=>{expect(res.data).toEqual({success:true})})})//测试请求是否404test('getData返回结果为404',()=>{//由于不触发catch就不会走测试校验，所以会成功，我们需要做一下限制//这行代码限制下面的代码中必须要执行一次expect方法，如果非404就不会走下面的expect，则测试不会通过expect.assertions(1);//使用promise时需要return//如果只想测试404这样写是有问题的，需要配合assertions使用returngetData2().catch(err=>{expect(err.toString().indexOf('404')>-1).toBe(true)})})//另一种写法test('getData返回结果为{success:true}',()=>{//会返回很多数据，其中包含data对象//getData2().then((res)=>console.log(res))//{//status:200,//statusText:'OK',//headers:{},//......//data:{success:true}//}//resolves方法会将接口返回的字段全部获取，再使用toMatchObject方法进行匹配大对象中是否存在data对象returnexpect(getData2()).resolves.toMatchObject({data:{success:true}})})//还可以使用async/awaittest('getData返回结果为{success:true}',async()=>{awaitexpect(getData2()).resolves.toMatchObject({data:{success:true}})})钩子函数钩子函数可以当作一个测试用例的生命周期来看待，有 beforeAll 、beforeEach、afterEach、afterAll。以下是一些关于钩子函数的概念和场景：beforeAll：在所有测试用例执行前运行beforeEach：在每个测试用例执行前执行一次afterEach：在每个测试用例执行后执行一次afterAll：在所有测试用例结束后运行有时候，需要测试一个类中的多个方法，这些方法可能会反复操作同一个对象上的属性。如果使用同一个实例，就会相互干扰，导致测试用例无法通过。此时，需要使用不同的实例来进行测试。Counter 类//Counter.jsclassCounter{constructor(){this.number=0;}add(){this.number+=1;}minus(){this.number-=1;}}exportdefaultCounter;我们想要测试里面的 add 和 minus 方法是否正确，需要实例化一个对象进行测试。但是下面的测试用例使用的永远都是同一个实例，第二个测试用例永远都不会通过。因为执行了第一个测试用例，第二个测试用例的值只能是 0。//jest.test.jsconstcount=newCounter();//使用下方两种测试方法会互相影响，先加一后减一，结果永远是0test('测试加法',()=>{count.add();expect(count.number).toBe(1);})test('测试减法',()=>{count.minus();expect(count.number).toBe(-1);})需要使用钩子函数，在每次执行测试用例的时候，都让他重新实例化一个对象//jest.test.jsletcount=null;//类似于生命周期//会在测试用例执行前运行beforeAll(()=>{console.log('beforeAll')});//会在每个测试用例执行前执行一次，这样就会解决上面互相影响的问题beforeEach(()=>{console.log('beforeEach')count=newCounter();});//会在每个测试用例执行后执行一次afterEach(()=>{console.log('afterEach')});//会在所有测试用例结束后运行afterAll(()=>{console.log('afterAll');});test('测试加法',()=>{console.log('add')count.add();expect(count.number).toBe(1);})test('测试减法',()=>{console.log('minus')count.minus();expect(count.number).toBe(-1);})分组方法 discribe//jest.test.jsletcount=null;//describe方法，可以将测试用例进行分组，更加好维护同类型功能的测试用例describe('count测试',()=>{beforeAll(()=>{console.log('beforeAll')});beforeEach(()=>{console.log('beforeEach')count=newCounter();});afterEach(()=>{console.log('afterEach')});afterAll(()=>{console.log('afterAll');});//将add类型进行分组describe('测试add类型用例',()=>{//在describe方法中，钩子函数会按照层级嵌套进行执行，先执行外部，再执行内部，不同的describe互不干扰beforeEach(()=>{console.log('beforeEachadd');});test('测试加法',()=>{console.log('add')count.add();expect(count.number).toBe(1);})})//将minus类型进行分组describe('测试minus类型用例',()=>{test('测试减法',()=>{console.log('minus')count.minus();expect(count.number).toBe(-1);})})})加上 describe 方法的执行效果如下图。Mock在日常开发中，当前端开发差不多后，后端接口可能还没有提供，这个时候我们就要用 Mock 数据。而 Jest 也有 Mock 方法，用于模拟一些 JavaScript 的函数等。我们先来一个比较简单的 mock.fn//mock.jsexportconstrunFn=(fn)=>{fn(123);}//mock.test.jstest('测试runFn',()=>{//通过jest的fn方法创建一个模拟函数，如果不传参数会默认生成一个函数//1.通过func.mock获取想要的值//2.可以自定义返回值//3.改变内部函数的实现，模拟接口请求，不请求代码中的接口constfunc=jest.fn(()=>456);//还可以使用mockReturnValueOnce方法进行控制输出，两种方法都使用时会覆盖fn方法中的返回值，支持链式调用//将Once去掉与fn方法一样，多次会返回相同的值func.mockReturnValueOnce('zoo')//返回this方法mockReturnThisfunc.mockReturnThis();//还可以使用mockImplementation方法书写函数内部，可以在函数内部写逻辑，与jest.fn方法的参数一样，还可以填加Oncefunc.mockImplementation(()=>{return'123';})//执行被测函数runFn(func);runFn(func);//console.log(func.mock)//因为被调用了两次，所以长度都是2//{//calls:[[123],[123]],//每次的调用情况，传递的参数是什么//instances:[undefined,undefined],//每次调用的this指向，被调用了几次//invocationCallOrder:[1,2],//执行顺序，可能会传入同一个或多个方法中，需要记录一下顺序//results:[//mock函数每次执行后的返回值//{type:'return',value:456},//{type:'return',value:456}//]//}//通过toBeCalled判断函数是否被调用expect(func).toBeCalled();//判断当前函数调用了几次被调用了两次expect(func.mock.calls.length).toBe(2);//判断参数是什么expect(func.mock.calls[0]).toEqual([123]);//判断每次调用的时候参数是什么expect(func).toBeCalledWith(123);//判断返回值expect(func.mock.results[0].value).toBe('zoo');})Mock 高阶用法如果需要通过修改请求的方式进行测试，而不使用测试框架，我们可能需要修改请求的代码逻辑。但是，Jest提供了一种高级的 Mock 方法。我们只需在项目根目录下创建一个名为 __mocks__ 的文件夹，然后在其中自定义文件内容并导出，就可以使用自己定义的 Mock 函数而不必修改请求代码逻辑。书写测试用例文件，引入 __mocks__ 文件夹中的函数//mocker.test.js//使用mock方法引用__mocks__下创建的mock.jsjest.mock("./mock");//执行完上面的方法，会直接寻找__mocks__下的getData，而不是正常的请求文件//由于mock中没有getCode方法，最好只mock异步函数，同步函数直接测试即可//可以不必须创建__mocks__文件夹import{getData,}from"./mock";//需要使用下面的requireActual方法来引用非mock文件夹下的getCodeconst{getData}=jest.requireActual("./mock");//高阶mock//此处直接使用__mocks__目录下的mock文件中的函数test("测试getData",()=>{returngetData().then((data)=>{expect(eval(data)).toEqual("123");});});Mock-timers在特定的业务中，需要使用到定时器，测试的时候也是需要修改代码来测试不同时间，最主要的一点是，我们需要等时间才能看到我们的执行结果，Jest也有关于定时器的 Mock 函数。//mock.jsexportconsttimer=(fn)=>{setTimeout(()=>{fn();setTimeout(()=>{fn();},3000)},3000)}//mock-timers.test.jsimport{timer}from'./mock';//使用useFakeTimers方法告知Jest在下面的测试用例，如果用到了定时器异步函数的时候，都是用假的timers进行模拟jest.useFakeTimers();test('测试timer',()=>{constfn=jest.fn();timer(fn);//使用runAllTimers方法，让定时器立即执行，和useFakeTimers配合使用jest.runAllTimers();//如果代码中有多个定时器嵌套，只想测试最外层的定时器，则需要使用runOnlyPendingTimers方法//这个方法会只执行当前在队列中的函数，可以多次调用jest.runOnlyPendingTimers();jest.runOnlyPendingTimers();//advanceTimersByTime方法，可以快进时间//因为timer中，三秒后只执行了第一层，如果是六秒，则会执行两次fnjest.advanceTimersByTime(3000);})snapshot 快照到这里我们已经可以测试一些代码了，但是我们要如何捕捉执行结果和当前做对比呢？这时候就要使用快照功能了。//snapshot.jsexportconstconfig1=()=>{return{method:'GET',url:'/api',time:newDate()}}exportconstconfig2=()=>{return{method:'GET',url:'/api',time:newDate().getTime()}}//snapshot.test.jsimport{config1,config2}from"./snapshot";test('测试config1返回值',()=>{//但如果每次函数修改的时候，当前测试用例也要不断地修改//expect(config()).toEqual({//method:'GET',//url:'/api'//});//需要使用快照匹配toMatchSnapshot方法//此方法会生成一个__snapshots__目录，下面的文件中，第一次执行中config生成的结果会存到快照文件中//快照会根据test方法中的描述生成一个映射关系//修改后的config的执行结果与快照中的结果不同时会报错，需要更新快照//如果config中有的值是每次运行都会变化的，那么每次快照都不会与当前执行相同，除非执行后再更新快照//需要将在toMatchSnapshot方法中传递一个参数，设置一下time为任意格式的Date类型expect(config1()).toMatchSnapshot({time:expect.any(Date)});})test('测试config2返回值',()=>{expect(config2()).toMatchSnapshot({time:expect.any(Number)});})行内快照生成//snapshot.test.js//需要安装prettiertest("测试config2返回值",()=>{//toMatchInlineSnapshot方法，将执行快照放到行内中，会放到toMatchInlineSnapshot方法中expect(config2()).toMatchInlineSnapshot({time:expect.any(Number)},`Object{"method":"GET","time":Any,"url":"/api",}`);});对 dom 节点测试Jest 内部自己模拟了一套 jsDom ，可以在 node 的环境下执行需要浏览器环境 dom 的测试用例。//dom.jsimport$from'jquery';constaddDiv=()=>{//jQuery$('body').append('');}exportdefaultaddDiv;//dom.test.jsimportaddDivfrom'./dom';import$from'jquery';test('测试addDiv',()=>{addDiv();addDiv();console.log($('body').find('div').length);//测试domexpect($('body').find('div').length).toBe(2);expect(document.getElementsByTagName('div').length).toBe(2);})VSCode 插件Jest Snippets 用于快速生成 Jest 代码块的工具。Jest 能够检测当前文件夹中的测试用例并自动运行测试，还支持可视化操作，更新、执行以及单个执行等功能，非常方便！常用配置解读module.exports={//检测从哪个目录开始，rootDir代表根目录roots:["/src"],//代码测试覆盖率通过分析那些文件生成的，!代表不要分析collectCoverageFrom:[//src下所有jsjsxtstsx后缀的文件"src/**/*.{js,jsx,ts,tsx}",//src下所有.d.ts后缀的文件"!src/**/*.d.ts"],//运行测试之前，我们额外需要准备什么setupFiles:["react-app-polyfill/jsdom"],//当测试环境建立好后，需要做其他事情时可以引入对应的文件setupFilesAfterEnv:["/src/setupTests.js"],//哪些文件会被认为测试文件testMatch:[//src下的所有__tests__文件夹中的所有的jsjsxtstsx后缀的文件都会被认为是测试文件"/src/**/__tests__/**/*.{js,jsx,ts,tsx}",//scr下的所有一.test/spec.js/jsx/ts/tsx后缀的文件都会被认为是测试文件"/src/**/*.{spec,test}.{js,jsx,ts,tsx}",],//测试运行的环境，会模拟domtestEnvironment:"jsdom",//测试文件中引用一下后缀结尾的文件会使用对应的处理方式transform:{//如果引用的是jsjsxmjscjststsx后缀的文件会使用/config/jest/babelTransform.js文件进行处理"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$":"/config/jest/babelTransform.js",//如果引用的是css后缀的文件，会使用/config/jest/cssTransform.js文件处理"^.+\\.css$":"/config/jest/cssTransform.js",//不是以jsjsxmjscjststsxcssjson这些为后缀的文件会使用/config/jest/fileTransform.js文件进行处理"^(!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"/config/jest/fileTransform.js",},//忽略transform配置转化的文件transformIgnorePatterns:[//node_modules目录下的jsjsxmjscjststsx后缀的文件都不需要转化"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",//.module.css/sass/scss后缀的文件都不需要转化"^.+\\.module\\.(css|sass|scss)$",],//自动化测试时，应用的模块应该从哪里寻找，默认是在node_modulesmodulePaths:[],//模块名字使用哪种工具进行映射moduleNameMapper:{//针对于native移动端//"^react-native$":"react-native-web",//将.module.css/sass/scss模块使用identity-obj-proxy工具进行转化"^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy",},//引入模块时，进行自动查找模块类型，逐个匹配moduleFileExtensions:["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node",],//监听插件watchPlugins:["jest-watch-typeahead/filename","jest-watch-typeahead/testname",],//重置mockresetMocks:true,};小结在实际业务应用中，我们建议对可复用的组件、工具函数、工具类等一些无副作用，可预知结果的代码来进行单元测试。在前期开发过程中的投入会大于没有单元测试的投入，因为要写一些测试用例，还要执行测试用例，优化代码等。但是在长久迭代中，这种方法会比没有进行单元测试的模块更加稳定。代码地址前置 demo ：https://github.com/Jadony/Jest-demoJest 简单配置：https://github.com/Jadony/jest-configJest 匹配器：https://github.com/Jadony/jest-matchers异步代码测试：https://github.com/Jadony/jest-asyncJest 钩子函数：https://github.com/Jadony/jest-hookJest 的 mock 函数：https://github.com/Jadony/jest-mockJest 的快照：https://github.com/Jadony/jest-snapshotJest 对 Dom 节点的测试：https://github.com/Jadony/jest-dom参考文档《前端要学的测试课 从Jest入门到TDD/BDD双实战》(https://coding.imooc.com/class/chapter/372.html#Anchor)如果想学习更多内容，请移步至 Jest(https://jestjs.io/zh-Hans/docs/getting-started) 官方文档。看完两件事如果你觉得这篇内容对你挺有启发，我想邀请你帮我两件小事1.点个「在看」，让更多人也能看到这篇内容（点了「在看」，bug -1 ）2.关注公众号「政采云技术」，持续为你推送精选好文招贤纳士政采云技术团队（Zero），Base 杭州，一个富有激情和技术匠心精神的成长型团队。政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队。团队现有 80 余个前端小伙伴，平均年龄 27 岁，近 4 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、智能化平台、性能体验、云端应用、数据分析、错误监控及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给ZooTeam@cai-inc.com