当前位置: 首页 > Web前端 > HTML

如何编写前端单元测试

时间:2023-03-27 22:54:52 HTML

闅忕潃鍓嶇瀹炵幇鐨勪笟鍔¢€昏緫瓒婃潵瓒婂鏉傦紝鍓嶇鍗曞厓娴嬭瘯鐨勯噸瑕佹€т篃瓒婃潵瓒婇珮銆傝€屼竴涓ソ鐨勫崟鍏冩祴璇曚笉浠呭彲浠ヤ繚璇佷唬鐮佺殑璐ㄩ噺锛岃繕鍙互鎻愰珮寮€鍙戞晥鐜囥€傝繖绡囨枃绔犱細璁茶濡備綍缂栧啓鍓嶇鍗曞厓娴嬭瘯銆傝儗鏅畝鍗曚粙缁嶄竴涓嬭儗鏅紝绗旇€呭湪宸ヤ綔涓礋璐e紑鍙戝墠绔疭DK锛屾祴璇曟鏋朵娇鐢╦est銆傛垜浠殑椤圭洰瀵逛唬鐮佹祴璇曡鐩栫巼鏈変竴瀹氱殑瑕佹眰锛岄渶瑕佹弧瓒筹細{"branches":80,"functions":80,"lines":80,"statements":80}姣斿鎴戜滑闇€瑕佹祴璇曡繖涓姛鑳?exportconstgetConfig=(name)=>{return{foo:()=>{},name:name||鈥滃尶鍚嶇殑鈥濓紝};};瀵瑰簲鐨勬祴璇曠敤渚嬩竴鑸槸杩欐牱鐨勶細describe("getConfig",()=>{test("濡傛灉鏈夊弬鏁板簲璇ヨ繑鍥瀗ame",()=>{constname="zxf4399";constconfig=getConfig(name);expect(config.name).toBe(name);});test("濡傛灉娌℃湁鍙傛暟锛屽簲璇ヨ繑鍥為粯璁ゅ悕绉?,()=>{constconfig=getConfig();expect(config.name).toBe("鍖垮悕");});});鎵ц缁撴灉濡備笅锛?---------|--------|---------|--------|--------|--------------------鏂囦欢|%Stmts|%鍒嗘敮|%鍑芥暟|%琛寍鏈鐩栫殑琛?s----------|----------|------------|--------|--------|------------------鎵€鏈夋枃浠秥100|100|50|100|绱㈠紩.js|100|100|50|100|---------|---------|---------|---------|----------|--------------------绗戣瘽锛氭湭杈惧埌鍔熻兘鐨勨€滃叏灞€鈥濊鐩栭槇鍊?80%)锛?0%娴嬭瘯濂椾欢锛?passed锛?totalTests锛?passed锛?totalSnapshots锛?totalTime锛?.444s锛屼及璁?sRan鎵€鏈夋祴璇曞浠躲€侲LIFECYCLE娴嬭瘯澶辫触銆傛湁鍏虫洿澶氳缁嗕俊鎭紝璇峰弬瑙佷笂鏂囥€傜敱浜庡姛鑳借鐩栫巼娌℃湁杈惧埌80%锛屾祴璇曞け璐ラ棶棰樺凡瑙e喅-Phase1涔嬪墠鐨勮В鍐虫柟妗堬細test("shouldtestfoofunction",()=>{constconfig=getConfig();config.foo&&config.foo();});缁撴灉锛?---------|--------|----------|--------|---------|-------------------鏂囦欢|%Stmts|%鍒嗘敮|%鍑芥暟|%琛寍鏈鐩栫殑琛?s------------|---------|----------|--------|---------|---------------------鎵€鏈夋枃浠秥100|100|100|100|绱㈠紩.js|100|100|100|100|----------|--------|-----------|--------|---------|----------------娴嬭瘯濂椾欢锛?涓€氳繃锛?涓猼otalTests锛?涓€氳繃锛?涓猼otalSnapshots锛?totalTime锛?.448s锛屼及璁?sRan鎵€鏈夋祴璇曞浠?鎴戜滑鍙戠幇鍑芥暟鐨勮鐩栫巼宸茬粡杈惧埌浜?00%锛屼絾鏄垜娌℃湁鍦╯houldtestfoo鍑芥暟娴嬭瘯鐢ㄤ緥涓皟鐢╡xpect鍑芥暟鏄惁鍚堢悊绛旀鏄悎鐞嗙殑銆傝櫧鐒舵垜浠湪娴嬭瘯鐢ㄤ緥涓病鏈夎皟鐢╡xpect鍑芥暟锛屼絾鏄垜浠湪娴嬭瘯鐢ㄤ緥涓皟鐢ㄤ簡config.foo鍑芥暟锛岃€宑onfig.foo鍑芥暟瀹氫箟鍦╣etConfig鍑芥暟涓紝鎵€浠est浼氳涓烘垜浠祴璇曚簡杩欎釜鍑芥暟銆備絾瀹為檯涓婏紝杩欑娴嬭瘯琛屼负鏄病鏈夋剰涔夌殑锛屾垜浠彧鏄负浜嗘弧瓒虫祴璇曡鐩栫巼鐨勮姹傝€屽啓鐨勩€傝В鍐抽棶棰?Phase2瑙e喅Phase1闂鎴戜滑闇€瑕佺煡閬搄est鐨勬祴璇曡鐩栫巼鏄€庝箞璁$畻鐨勩€俲est鐨刢overageprovider鏈変袱绉嶏紝鍒嗗埆鏄細istanbuljsc8鐢变簬鎴戜滑椤圭洰涓娇鐢ㄧ殑coverageProvider鏄痓abel锛屾墍浠ュ彧闇€瑕佸叧娉╥stanbuljs鍗冲彲銆傚浜庤繖涓猲oop鍑芥暟娴嬭瘯鐢ㄤ緥锛屾垜浠彲浠ヤ娇鐢╥stanbulignorenext鏉ュ拷鐣ヨ繖涓嚱鏁扮殑娴嬭瘯瑕嗙洊鐜囥€俥xportconstgetConfig=(name)=>{return{foo:/*istanbulignorenext*/()=>{},name:name||鈥滃尶鍚嶇殑鈥濓紝};};褰撶劧鏇存帹鑽愭娊璞′竴涓猲oop鍑芥暟锛岀劧鍚庡湪娴嬭瘯鐢ㄤ緥涓皟鐢ㄨ繖涓嚱鏁般€?*istanbul蹇界暐涓嬩竴涓?/exportconstnoop=()=>{};exportconstgetConfig=(name)=>{return{foo:noop,name:name||鈥滃尶鍚嶇殑鈥濓紝};};鏈€缁堢粨鏋滀篃浠や汉婊℃剰锛?-----------|--------|----------|--------|--------|--------------------鏂囦欢|%Stmts|%鍒嗘敮|%鍑芥暟|%琛寍鏈鐩栫殑琛?s----------|--------|----------|--------|----------|---------------------鎵€鏈夋枃浠秥100|100|100|100|绱㈠紩.js|100|100|100|100|------------|----------|------------|--------|--------|------------------TestSuites:1passed,1totalTests:2passed,2totalSnapshots:0totalTime:0.352s,estimated1sRan鎵€鏈夋祴璇曞浠躲€傚浣曞啓鍗曞厓娴嬭瘯Phase1鍜孭hase2鏄В鍐抽棶棰樼殑鏂规硶銆備粠鎶€鏈笂璁睵hase2鏇村悎鐞嗭紙noop鍑芥暟鏈韩搴旇涓嶆槸鑰冩牳鐨勯噸鐐癸級锛屼絾鏄綘涓嶈兘璇碢hase1鐨勬柟妗堟槸閿欒鐨勩€傛墍浠ユ垜浠渶瑕佹€濊€冨浣曞啓鍗曞厓娴嬭瘯馃棣栧厛鏉ョ湅涓€涓畝鍗曠殑渚嬪瓙锛屾渶绠€鍗曠殑鍗曞厓娴嬭瘯锛歟xportconstsum=(a,b)=>a+b;//unittestimport{sum}from".";describe("sum",()=>{test("鍔?+2绛変簬3",()=>{expect(sum(1,2)).toBe(3);});});浠庤繖涓緥瀛愪腑锛屾垜浠彲浠ョ湅鍑哄崟鍏冩祴璇曠殑鍩烘湰缁撴瀯锛氬噯澶囪緭鍏ユ暟鎹紝璋冪敤琚祴鍑芥暟锛屾柇瑷€杈撳嚭缁撴灉锛屼换浣曞崟鍏冩祴璇曢兘鍙互閬靛惊杩欎釜妗嗘灦锛歡iven-when-then銆傛槸涓嶆槸鎸夌収杩欎釜妗嗘灦灏辫兘鍐欏ソ鍗曞厓娴嬭瘯鍛紵鍏跺疄涓嶇劧锛屾垜浠鐭ラ亾鍗曞厓娴嬭瘯鐨勭壒鐐癸細澶辫触鍘熷洜鏄庣‘锛屾墽琛岄€熷害蹇紝澶辫触鍘熷洜鏄庣‘锛屽綋涓斾粎褰撲笟鍔′唬鐮佸姛鑳芥敼鍙樻椂锛岃緭鍏ヤ笉鍙橈紝娴嬭瘯鎵嶄細澶辫触涓嶅彉銆傝繖涓壒鎬ф槸鎴戜滑閲嶆瀯浠g爜鐨勪繚璇併€傚綋鎴戜滑閲嶆瀯浠g爜鐨勬椂鍊欙紝鎴戜滑鍙互鏀惧績鐨勪慨鏀逛唬鐮侊紝鍥犱负鎴戜滑鐭ラ亾鍙娴嬭瘯閫氳繃锛岄偅涔堟垜浠殑浠g爜灏辨槸姝g‘鐨勩€傝〃鐜板姏闈炲父寮猴紝鍦ㄤ袱涓柟闈細鐪嬪埌娴嬭瘯鐢ㄤ緥鐨勬弿杩帮紝灏辩煡閬撶敤渚嬬殑鎰忓浘褰撴祴璇曞け璐ユ椂锛屽彲浠ュ揩閫熷畾浣嶉棶棰橈紝鎵ц閫熷害蹇€傚崟鍏冩祴璇曠殑鎵ц閫熷害闈炲父閲嶈锛屽洜涓烘垜浠笇鏈涘湪寮€鍙戣繃绋嬩腑锛岃兘澶熷揩閫熷緱鍒板弽棣堬紝鑰屼笉鏄暱鏃堕棿绛夊緟銆備负浜嗚揪鍒拌繖涓洰鐨勶紝鎴戜滑闇€瑕侊細Mock澶栭儴渚濊禆锛屾瘮濡俉ebSocket杩炴帴锛屾暟鎹簱杩炴帴绛夈€傛祴璇曚唬鐮佷笉鍖呭惈閫昏緫锛屽惁鍒欐祴璇曞け璐ョ殑鏃跺€欎笉鐭ラ亾鏄笉鏄帴鍙g殑闂娴嬭瘯浠g爜鎴栦笟鍔′唬鐮?funny.jpg)璁╂垜浠湅涓€涓洿濂界殑鍗曞厓娴嬭瘯绀轰緥锛歟xportclassEventEmitter{constructor(){this.events={};}on(event,listener){this.events[浜嬩欢]=this.events[浜嬩欢]||[];this.events[浜嬩欢].push(鐩戝惉鍣?;return()=>this.off(event,listener);}once(event,listener){constremove=this.on(event,(...args)=>{remove();listener(...args);});}emit(event,...args){this.events[event]?.forEach((listener)=>listener(...args));}off(event,listener){this.events[event]=this.events[event]?.filter((l)=>l!==listener);}}鍗曞厓娴嬭瘯锛氫粠"."瀵煎叆{EventEmitter};leteventEmitter;beforeEach(()=>{eventEmitter=newEventEmitter();});describe("EventEmitter",()=>{describe("on",()=>{test("搴旇涓轰竴涓簨浠舵坊鍔犱竴涓洃鍚櫒",()=>{constl鐩戝惉鍣?jest.fn();eventEmitter.on("浜嬩欢",渚﹀惉鍣?;eventEmitter.emit("浜嬩欢");鏈熸湜锛堝惉浼楋級.toHaveBeenCalled();});test('褰撹繑鍥炵殑鈥滃垹闄も€濆嚱鏁拌璋冪敤鏃跺簲璇ュ垹闄ょ洃鍚櫒',()=>{constlistener=jest.fn();constremove=eventEmitter.on("event",listener);remove();eventEmitter.emit("event");expect(listener).not.toHaveBeenCalled();});});describe("once",()=>{test("搴旇涓轰竴涓簨浠舵坊鍔犱竴涓竴娆℃€х洃鍚櫒",()=>{constlistener=jest.fn();eventEmitter.once("event",listener);eventEmitter.emit("浜嬩欢");eventEmitter.emit("浜嬩欢");expect(listener).toHaveBeenCalledTimes(1);});});describe("emit",()=>{test("搴旇涓轰竴涓簨浠惰皟鐢ㄦ墍鏈夌洃鍚櫒",()=>{constlistener1=jest.fn();constlistener2=jest.fn();eventEmitter.on("浜嬩欢",listener1);eventEmitter.on("浜嬩欢",listener2);eventEmitter.emit("浜嬩欢");鏈熸湜锛坙istener1锛?toHaveBeenCalled锛堬級锛涙湡鏈涳紙listener2锛?toHaveBeenCalled锛堬級锛泒);test("搴旇灏嗗弬鏁颁紶閫掔粰鐩戝惉鍣?,()=>{constlistener=jest.fn();eventEmitter.on("event",listener);eventEmitter.emit("event","arg1","arg2");expect(listener).toHaveBeenCalledWith("arg1","arg2");});});describe("off",()=>{test("搴旇鍒犻櫎浜嬩欢鐨勪睛鍚櫒",()=>{constlistener=jest.fn();eventEmitter.on("event",listener);eventEmitter.off("event",listener);eventEmitter.emit("event");expect(listener).not.toHaveBeenCalled();});});});杩欎釜娴嬭瘯浠g爜鐨勭壒鐐癸細浠g爜绠€娲侊紝娌℃湁澶氫綑鐨勯€昏緫銆傛祴璇曠敤渚嬬殑鎻忚堪闈炲父娓呮櫚锛屽彲浠ュ緢蹇煡閬撶敤渚嬬殑鎰忓浘銆傜敱浜庢病鏈夊閮ㄤ緷璧栵紝娴嬭瘯鐢ㄤ緥鐨勬墽琛岄€熷害闈炲父蹇€備竴涓ソ鐨勫崟鍏冩祴璇曞簲璇ョ鍚坓iven-when-then鍘熷垯锛岃兘娓呮櫚鎻忚堪娴嬭瘯鎰忓浘锛屾墽琛岄€熷害蹇紝涓嶅寘鍚€昏緫鏈綔鍝佷负鍘熷垱锛屼娇鐢ㄣ€婄讲鍚?闈炲晢涓氭€т娇鐢?绂佹婕旂粠 4.0 鍥介檯銆嬭鍙崗璁?/p>