绗?2闆嗭細浠庨浂寮€濮嬪疄鐜帮紙jest鍗曞厓娴嬭瘯锛?.鑱婅亰娴嬭瘯杩欐鍜屽ぇ瀹惰亰鑱婂垎浜拰浣犱竴璧峰涔犳祴璇曟椂鍋氱殑绗旇鍜屾垜鍦ㄨ繖涓」鐩腑鍋氱殑涓€浜涙祴璇曘€傚墠绔唬鐮佺殑鍗曞厓娴嬭瘯鍜岄泦鎴愭祴璇曪紝椋庨洦鍏肩▼銆傚緢澶氫汉涓€鎻愬埌瀹冨氨璇磋繖鏄ソ浜嬨€傝闂湁鍑犲鍏徃鐨刅ue椤圭洰涓ユ牸瑕佹眰璺戝崟鍏冩祴璇曞拰闆嗘垚娴嬭瘯锛熸祴璇曞け璐ユ槸鍚︽殏鍋滃彂灏勶紵闄や簡澶у叕鍙革紝寰堝皯鏈変汉鑳藉仛鍒般€傛瘯绔燂紝澶у鏁板叕鍙稿彧璁╀笓涓氱殑娴嬭瘯鍥㈤槦鏉ュ仛銆備汉鑲夎瘯楠?銆傜幇鍦ㄧ殑鍓嶇绯荤粺濡傛搴炲ぇ锛屽洿缁曞墠绔紑鍙戠殑鎶€鏈拰鐭ヨ瘑鐐瑰眰鍑轰笉绌凤紝鏇翠綍鍐靛悇绉嶆妧鏈箣闂寸殑绾犺憶涓嶆柇琚壀銆佷贡銆傚惉鍒版湁浜鸿锛氣€滄垜鍙兂鎶婂墠绔唬鐮佸啓濂斤紝鍏朵粬鐨勪笉绠¤涓嶈鈥濓紝杩欏彞璇濇槸涓€鍙ョ儌璇濓紝杩欎簺鏉備竷鏉傚叓鐨勬妧鏈篃鏄墠绔妧鏈紝濡傛灉浣犲彧鑳藉啓浣犳墍璋撶殑鈥樺墠绔唬鐮佲€欙紝閭ｄ綘鐪熺殑鍙兘娲讳竴杈堝瓙鈥欏垵瀛﹁€呪攽(锟Ｐ旓浚)鈹嶃€傝繖涓ぇ瀹堕兘璁ゅ悓锛屼絾鏄负浠€涔堝ぇ瀹朵笉鐢ㄥ憿锛燂紵锛燂紵锛燂紵锛燂紵锛燂紵鎺ヤ笅鏉ワ紝鎴戜滑灏嗗垪鍑哄畠鐨勪紭鐐瑰拰缂虹偣銆?.浼樼己鐐圭己鐐瑰墠绔祴璇曟妧鏈綋绯诲皻鏈舰鎴愩€傝繖濂梪i浣跨敤jest涓巚ue-cli闆嗘垚銆傜湡鐨勪笉濂界敤銆傛湁涓€瀹氱殑瀛︿範鎴愭湰銆傛垜闈㈣瘯杩囧緢澶?骞翠互涓婄粡楠岀殑浜猴紝杩炶璁℃ā鍨嬫垜閮戒笉鎳傦紝鏇村埆璇磋浠栧娴嬭瘯浜嗐€傘€傘€傚彲鏈夊彲鏃犵殑鎯呭喌锛屽緢澶氶」鐩兘娌℃湁寰堝ソ鐨勮瘯杩愯锛屼絾鏄粬浠啓浜嗗緢澶歜ug鍜屼笉鎯宠繘姝ョ殑浜猴紝涓嶈灏忕湅杩欎竴鐐癸紝寰堝鎶€鏈汉鍛樹細鍒堕€犲悇绉嶇悊鐢憋紝涓嶆兂璺冲嚭鑸掗€傚尯銆傛瘡娆℃洿鏀归渶姹傛垨浼樺寲浠ｇ爜锛岄兘闇€瑕佹洿鏀逛袱浠戒唬鐮侊紝鑰楄垂澶ч噺浜哄姏銆傚ソ澶勬槸澶氫簡涓€涓€濈淮缁村害锛屽浜嗕竴涓妧鏈繚闅滀釜浜烘潵璇达紝瀵逛簬鎯抽潬鎶€鏈吇瀹剁硦鍙ｇ殑浜烘潵璇达紝杩欎竴鐐逛篃寰堥噸瑕併€備繚鎶や富瑕侀€昏緫鐨勬祦鐣呮€э紝鏁村娴嬭瘯閮藉彲浠ヨ窇寰楁病鏈夊お澶氶敊璇痓绾ч珮锛岃鍒汉鏀惧績浣跨敤浣犵殑涓滀笢锛岃繖涔熸槸纭疄鍔?.鐢ㄩ€斿拰鍒嗙被澶ц嚧鍒嗗垎涓轰袱绫伙細BDD鎶婃墍鏈夌殑閫昏緫閮藉啓鍑烘潵锛岀劧鍚庢牴鎹綘鐨勬暣浣撻€昏緫鍒跺畾浣犵殑娴嬭瘯銆傚ソ澶勫綋鐒舵槸绠€鍗曟槗鎳傦紝鎬濊矾鏇村叏闈€傜己鐐规槸瑕嗙洊鐜囦綆锛屼笉澶畨鍏ㄣ€俆DD缂栧啓娴嬭瘯鐒跺悗寮€鍙戙€傝繖绉嶆ā寮忛潪甯告湁瓒ｃ€傚厛鍐欐祴璇曪紝涔熷氨鏄厛鍦ㄨ剳娴烽噷鏁翠綋甯冨眬锛屾瘡涓€姝ラ兘鎯冲ソ浜嗗啀鍋氥€傛祴璇曡鐩栫巼鍙兘鏄?00%锛屽畠鐨勭己鐐瑰お鏄庢樉浜嗐€傚紑鍙戜汉鍛樺繀椤绘槸鐔熺粌鐨勶紝濡傛灉闇€姹傛敼鍙樹簡鈥︹€︽湁浜哄繖銆傚熀鏈笂寤虹珛鎴戞槸鍦╲ue椤圭洰涓洿鎺ラ€夋嫨鐨刯est娴嬭瘯銆傛湁鍗曠嫭瀹為獙鐨勬湅鍙嬪彲浠ュ畨瑁卬pmijest-D閰嶇疆"scripts":{"test":"jest--watchAll"}锛屽湪鍛戒护琛岃繍琛宯pmruntest銆備絾鏄鏋滅數鑴戣繍琛屾椂娌℃湁杩欎釜鍛戒护锛屽彲浠ヤ娇鐢╪px鎴栬€呭叏灞€瀹夎銆傚鏋滄槸es椤圭洰锛岄渶瑕侀泦鎴恘pmi@babel/core@babel/preset-env-Djest鍐呯疆浜嗗babel鐨勪緷璧栵紝浠栫湅鍒?babelrc鏃讹紝浼氫娇鐢╦est閰嶅悎鍩烘湰瑙ｆ瀽銆傚畠浼氳嚜鍔ㄦ壘鍒皒x.test.js鏂囦欢銆傞厤缃涓嬶紝鎮ㄥ彲浠ュ皢鍏朵慨鏀逛负鎮ㄥ枩娆㈢殑璇箟銆俥lement-ui浣跨敤瑙勮寖銆傝繖涓枃浠跺彲浠ラ€氳繃銆俲estinit鐢熸垚jest.config.jstestMatch:['**/tests/unit/**/*.(spec|test).(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],//1:鏈€澶栧眰鐨刣escribe鐩稿綋浜庝竴涓ぇ鐨刾arentcontainerbox锛屾妸test鍒嗘垚'blocks'//鍑洪敊鐨勬椂鍊欙紝console浼氭姤鍛婃槸鍝釜block'Somethingwent閿欒describe('Button鐩稿叧浠ｇ爜',()=>{//2:'灏忓潡'娴嬭瘯鍗曞厓锛岄拡瀵规煇浜涜亴璐ｅ叿浣撴祴璇?test('娴嬭瘯鎸夐挳鐐瑰嚮灏忎汉',()=>{//3:Assertion锛屼篃灏辨槸鐪熸鍒ゆ柇鏌愪簺鍊兼槸鍚︽纭殑涓€涓楠xpect(1).toBe(1);});});浠ヤ笂闈负渚?/鎰忔€濇槸鍒ゆ柇1鏄惁涓?==1expect(1).toBe(1);//鐢辨鍙expect鍑芥暟璐熻矗鎺ユ敹瑕佹祴璇曠殑鍊?/toBe灏辨槸鎵€璋撶殑===锛岃窡閲岄潰鐨勫€兼瘮杈冧竴涓?/鏃㈢劧鏈?==锛岄偅鑲畾浼氭湁鏇村鐨勫垽鏂被鍨?/浠栫殑瀛﹀悕鏄痗onfigurator銆傚悇绫?configurator'toEqual涓嶆槸==銆備弗鏍兼潵璇存槸蹇界暐寮曠敤锛屽彧姣旇緝鍐呭锛屽唴閮ㄤ及璁℃槸搴忓垪鍖栫殑锛屾墍浠a:1}.toEqual({a:1})truetoBeFalsy鍙互杞负falsetoBeTruthy鍙互杞负truetoBeUndefinedisundefinedtoBeDefinedisnotundefinedtoBeNull===nullnotflip淇グ绗︼紝expect(1).not.toBe(2);1涓嶆槸2toBeGreaterThanOrEqual(3)澶т簬绛変簬3toBeLessThanOrEqual(3)灏忎簬绛変簬3toBeLessThan(3)灏忎簬3toBeGreaterThan(3)澶т簬3'abc'銆倀oMatch('b')//鏄惁鍖呭惈瀛楃涓?b'锛屽彲浠ュ啓姝ｅ垯鐢熷懡鍛ㄦ湡beforeEach(()=>{//willexecutemebeforeeachtestexecution});afterEach(()=>{//鎴戜細鍦ㄦ瘡涓祴璇曟墽琛屽畬涔嬪悗鎵ц});beforeAll(()=>{//鎴戜細鍦ㄦ墍鏈夋祴璇曟墽琛屽畬涔嬪墠鎵ц});afterAll(()=>{//I浼氬湪鎵€鏈夋祴璇曟墽琛屽畬姣曞悗鎵ц});describe('鎸夐挳鐩稿叧浠ｇ爜',()=>{test('娴嬭瘯鎸夐挳鐐瑰嚮灏忎紮',()=>{expect(1).toBe(1);});});杩欎釜鏃朵唬鎵€鏈夋彃浠剁殑閰嶇疆閮借秼鍚戜簬鈥滃姛鑳藉寲鈥濅箣涓婄殑鐢熷懡鍛ㄦ湡鍔熻兘锛岄潪甯稿鍚堣璁℃ā寮忥紝鎴戜滑鍦ㄥ啓椤圭洰鐨勬椂鍊欎篃鍙互鍊熼壌銆傜湅瀹屼笂闈㈡槸涓嶆槸瑙夊緱娴嬭瘯椤靛緢瀹规槗锛屽潙浜嗕互鍚庡啀缁撳悎vue椤圭洰銆?.vue鍐呴儴Vue褰撶劧鏄緢涓嶄竴鏍风殑锛屾覆鏌撴柟寮忎篃涓嶄竴鏍枫€傚垢杩愮殑鏄紝鏈塚ue鑷繁鐨勫洟闃熸彁渚涙敮鎸侊紝鍙互浠嬬粛Vue涓殑涓€浜涙蹇点€俶ount锛氫綘鍙互鐞嗚В鎴戠殑Vue涓疄渚嬪寲缁勪欢鐨勬柟娉曘€傚畼缃戣锛?CreateaWrappercontainingmountedandrenderedVuecomponents'锛屽嵆瀹屾暣鐨勬覆鏌撱€傚畠鐨勪紭鐐规槸瀹屽鎬э紝浣嗙己鐐逛篃鏄槑鏄剧殑浣庢晥鐜囥€係hallowMount涓巑ount鐩稿悓锛屽垱寤轰竴涓猈rapper锛屽寘鍚寕杞藉拰娓叉煋鐨勭粍浠禫ue缁勪欢鐨刉rapper涓嶅悓鐨勬槸锛岃瀛樻牴鐨勫瓙缁勪欢鍙槸鎸傝浇褰撳墠缁勪欢瀹炰緥锛涘寘瑁呭櫒鏄竴绉嶆柟娉曪紝鍖呮嫭宸插畨瑁呯殑缁勪欢鎴杤node浠ュ強娴嬭瘯缁勪欢鎴杤node鐨勬柟娉曘€傜洿瑙傛潵璇达紝灏辨槸涓撻棬鐢ㄦ潵娴嬭瘯鐨勪緥瀛愩€傜敱浜庣瘒骞呮湁闄愶紝鎴戝氨鐩存帴浣跨敤鎴戦」鐩腑鐨勪緥瀛愶紱鍏跺疄鎴戜篃涓嶆槸寰堟槑鐧借娴嬭瘯浠€涔堬紝鎵€浠ュ氨涓惧嚑涓畝鍗曠殑渚嬪瓙锛屽ぇ瀹朵竴璧峰涔狅紝涓€璧疯璁恒€侭utton缁勪欢鎸夐挳娴嬭瘯vue-cc-ui/tests/unit/Button.test.js//shallowMount鏄疈vue/test-utils瀹樻柟鎻愪緵鐨勬祴璇曞伐鍏穒mport{shallowMount}from'@vue/test-utils';importButtonfrom'../../src/components/Button';//杩欎釜鏄弬鑰冪綉涓婂寘鑾峰彇dom鐨勬柟娉曪紝涓嬮潰浼氳瑙ｐ煈噄mport{findTestWrapper}from'../utils/util';describe('娴嬭瘯鎸夐挳缁勪欢',()=>{it('1:鎸夐挳缁勪欢鍙互娓叉煋',()=>{//浣跨敤shallowMount瀹炰緥鍖栨垜鐨勬寜閽粍浠禼onstwrapper=shallowMount(Button);//鍏抽敭瀛梒ontains锛屽垽鏂璚rapper涓槸鍚﹀寘鍚尮閰嶉€夋嫨鍣ㄧ殑鍏冪礌鎴栫粍浠躲€?/鍗虫垜鎯冲垽鏂寜閽粍浠舵覆鏌撳悗椤甸潰涓婃槸鍚︾湡鐨勬湁鎸夐挳鍏冪礌銆俥xpect(wrapper.contains('button')).toBe(true);});it('2:鐐瑰嚮鎸夐挳缁勪欢鏃朵細瑙﹀彂鐐瑰嚮浜嬩欢',()=>{//杩樻槸鍏堟覆鏌揷onstwrapper=shallowMount(鎸夐挳锛?//鎵惧埌鎸夐挳瀹炰緥锛岃繖閲屾槸at(0)锛岀被浼间簬涓€涓暟缁刐0]锛沜onstbutton=findTestWrapper(wrapper,'button').at(0);//鍦ㄦ寜閽笂瑙﹀彂瀹冪殑鐐瑰嚮鏂规硶button.trigger('click');//emitted:杩斿洖鍖呭惈鐢盬rappervm瑙﹀彂鐨勮嚜瀹氫箟浜嬩欢鐨勫璞°€?/涔熷氨鏄洃鍚〉闈㈡槸鍚﹁Е鍙戜簡this.$emit('click')浜嬩欢//toBeTruthy涓婇潰鎴戜滑宸茬粡鎻愬埌浜唀xpect(wrapper.emitted().click).toBeTruthy();});it('3:浼犲叆icon鍙傛暟锛屽彲浠ユ樉绀哄浘鏍囩粍浠?,()=>{//shallowMount鍒濆鍖栨椂锛屽彲浠ヤ紶鍏ュ弬鏁?/涓嬮潰鐨勬搷浣滃ぇ瀹堕兘鐭ラ亾constwrapper=shallowMount(Button,{propsData:{icon:'cc-up'}});//鎵惧埌杩欎釜鍥炬爣鍏冪礌consticon=findTestWrapper(wrapper,'icon').at(0);//鎴戜紶瀹屽浘鏍囧悗锛屽浘鏍囩粍浠跺繀椤诲瓨鍦╡xpect(icon).toBeTruthy();});});涓婇潰鐨勪緥瀛愭彁鍒颁簡涓€涓叕鍏辨柟娉曘€傝鎴戣В閲娿€俥xportconstfindTestWrapper=(wrapper,tag)=>{returnwrapper.findAll(`[data-test="${tag}"]`);};鎴戜滑鍦ㄥ啓浠ｇ爜鐨勬椂鍊欙紝涓轰簡鏂逛究浠ュ悗鐨勬祴璇曪紝鎴戜滑杩樹細娣诲姞涓€浜涙祴璇曞睘鎬э紝姣斿涓嬮潰鐨?divdata-test='name'>{{name}}}
