注入返回值——TIL 項目 JavaScript 實戰(zhàn)筆記)
文檔教程知識庫【免費下載鏈接】til:memo: Today I Learned項目地址https://gitcode.com/gh_mirrors/ti/til點擊查看免費下載本篇技術(shù)指南聚焦 TIL 倉庫 javascript/mock-a-function-with-return-values-using-jest 所記錄的核心技巧如何用jest.fn()創(chuàng)建 Mock 函數(shù)并通過mockReturnValue()/mockReturnValueOnce()為它注入固定或一次性返回值從而讓被測代碼在無需真實依賴的情況下穩(wěn)定運行。讀完本文你將掌握 Mock 函數(shù)從創(chuàng)建、賦值、注入返回值到落地到組件測試與定時器測試的完整鏈路并了解它與mockImplementation、mockResolvedValue等姊妹 API 的關(guān)系。一、起步用 jest.fn() 創(chuàng)建 Mock 函數(shù)Jest 為處理 Mock 函數(shù)提供了一整套工具集合Mock Function API其中最基礎(chǔ)的入口就是jest.fn()。調(diào)用它即可得到一個全新的 Mock 函數(shù)該函數(shù)本身不執(zhí)行任何業(yè)務(wù)邏輯而是由測試代碼按需配置其行為。jest.fn() // 賦值給一個變量 const fakeFunc jest.fn(); // 作為 prop 傳給組件 SpecialInput handleChange{jest.fn()} /從上面的三行代碼可以看到j(luò)est.fn()的三種典型用法直接調(diào)用生成一個未綁定的 Mock 函數(shù)實例賦值給變量將 Mock 函數(shù)保存為fakeFunc后續(xù)可以通過該變量統(tǒng)一配置返回值、調(diào)用次數(shù)等行為作為 prop 傳入組件在渲染組件時傳入一個 Mock 函數(shù)如上面的handleChange用于占位并觀測組件是否正確調(diào)用了該回調(diào)。這一點在 TIL 倉庫的 react/mock-a-function-that-a-component-imports 中有直接的印證——當(dāng)組件依賴一個導(dǎo)入的函數(shù)isAuthenticated()時測試中正是用jest.fn().mockReturnValue(true)來替換真實實現(xiàn)而在 xstate/custom-jest-matcher-for-xstate-machine-states 中XState 機器的action: jest.fn()同樣以 Mock 函數(shù)來觀測動作是否被觸發(fā)。二、mockReturnValue()讓 Mock 函數(shù)始終返回指定值創(chuàng)建出 Mock 函數(shù)之后下一步就是為它配置返回值。最常用的方法是mockReturnValue(value)const fakeFunc jest.fn(); fakeFunc.mockReturnValue(hello); fakeFunc(); // hellomockReturnValue()的核心語義是無論函數(shù)被調(diào)用多少次只要沒有更優(yōu)先的一次性配置它都會返回同一個值。在上述示例中fakeFunc每次被調(diào)用都會得到字符串hello測試代碼無需關(guān)心函數(shù)內(nèi)部邏輯只需確認(rèn)當(dāng)這個函數(shù)被調(diào)用時它會返回什么這正是單元測試隔離外部依賴的關(guān)鍵手法。這種恒定返回值在真實測試場景中極其常用。TIL 倉庫的 react/mock-a-function-that-a-component-imports 給出了一個完整的落地案例// MyComponent.test.js // ... various testing imports import * as authModules from ./authentication; it(renders the component, () { authModules.isAuthenticated jest.fn().mockReturnValue(true); const wrapper shallow(MyComponent /); expect(toJson(wrapper)).toMatchSnapshot(); });這里通過import * as authModules拿到與MyComponent相同的模塊引用把isAuthenticated替換為jest.fn().mockReturnValue(true)的 Mock 版本。于是渲染MyComponent時組件內(nèi)部調(diào)用到的isAuthenticated()會返回true從而走入已認(rèn)證分支測試無需真實登錄態(tài)。反向場景只需要把返回值換成falseauthModules.isAuthenticated jest.fn().mockReturnValue(false);一句話總結(jié)mockReturnValue()的價值在于凡調(diào)用必返回讓依賴方在固定前提下被穩(wěn)定驅(qū)動。三、mockReturnValueOnce()讓返回值只生效一次與mockReturnValue()相對mockReturnValueOnce(value)只讓指定返回值生效一次隨后的調(diào)用不再返回該值const fakeFunc jest.fn(); fakeFunc.mockReturnValueOnce(hello); fakeFunc(); // hello fakeFunc(); // nullmockReturnValueOnce()的語義是第一次調(diào)用時返回配置值之后回落到 Mock 函數(shù)的默認(rèn)行為。這里有一個容易被忽略的細節(jié)需要澄清在 Jest 中未配置任何返回值/實現(xiàn)的 Mock 函數(shù)其默認(rèn)調(diào)用結(jié)果實際上是undefined而不是null原始筆記以null概括此后不再返回任何配置值這一結(jié)果讀者理解其意圖即可在編寫斷言時請以實際默認(rèn)值undefined為準(zhǔn)。該 API 最典型的用途是模擬前幾次調(diào)用返回特殊值的場景例如模擬輪詢接口第一次返回處理中后續(xù)返回已完成模擬數(shù)據(jù)庫查詢某次查詢命中緩存返回 A其余返回 B模擬需要多次調(diào)用才穩(wěn)定的第三方 SDK。四、組合運用默認(rèn)返回值 一次性覆蓋mockReturnValue()與mockReturnValueOnce()并不互斥二者組合可以表達大部分調(diào)用返回默認(rèn)值僅某幾次調(diào)用返回特殊值的行為const fakeFunc jest.fn(); fakeFunc .mockReturnValue(default) .mockReturnValueOnce(first) .mockReturnValueOnce(second); fakeFunc(); // first fakeFunc(); // second fakeFunc(); // default fakeFunc(); // default組合時的優(yōu)先級規(guī)則是一次性配置Once系列總是先于永久配置mockReturnValue系列被消費。所有Once值按注冊順序依次消耗完畢后函數(shù)才回落到mockReturnValue設(shè)置的恒定值。這一規(guī)則讓先特殊、后通用的測試編排變得非常直觀。五、倉庫實例Mock 函數(shù)在定時器與日志測試中的落地除了注入返回值jest.fn()的調(diào)用記錄能力也是斷言的核心依據(jù)。TIL 倉庫的 javascript/test-timing-based-code-with-jest-fake-timers 展示了jest.fn()與假定時器配合、用toHaveBeenCalled()驗證調(diào)用是否發(fā)生的完整流程jest.useFakeTimers(); describe(doSomethingAfter200ms, () { test(does something after 200ms (pass), () { const doSomething jest.fn(); doSomethingAfter200ms(doSomething); jest.advanceTimersByTime(201); expect(doSomething).toHaveBeenCalled(); }); });這里doSomething無需關(guān)心返回值——Mock 函數(shù)同時具備可配置行為與可觀測調(diào)用歷史兩種能力。類似的模式還出現(xiàn)在 javascript/turn-off-console-error-messages-in-a-test 中通過console.error jest.fn()屏蔽測試期的噪音輸出。結(jié)合這兩個倉庫實例可以得出jest.fn()是注入返回值 記錄調(diào)用歷史的統(tǒng)一入口而mockReturnValue只是它眾多行為配置中的一支。六、延伸mockReturnValue 的姊妹 APImockReturnValue與mockReturnValueOnce屬于 Jest Mock Function API 家族理解它們后可以順帶掌握同族的其他常用成員它們共享永久/一次性與普通值/異步值兩對維度的組合邏輯API語義mockReturnValue(value)每次調(diào)用都返回該值本文主題mockReturnValueOnce(value)僅下一次調(diào)用返回該值本文主題mockImplementation(fn)用自定義函數(shù)完全接管 Mock 函數(shù)的行為mockImplementationOnce(fn)僅下一次調(diào)用使用自定義實現(xiàn)mockResolvedValue(value)等價于mockImplementation(() Promise.resolve(value))用于返回已兌現(xiàn)的 PromisemockResolvedValueOnce(value)僅下一次調(diào)用返回已兌現(xiàn)的 PromisemockRejectedValue(value)等價于mockImplementation(() Promise.reject(value))用于模擬異步失敗選擇建議當(dāng)被測代碼只需要知道返回值時優(yōu)先用mockReturnValue系列更簡潔當(dāng)需要模擬真實邏輯或異步行為時再考慮mockImplementation與mockResolvedValue系列。配合toHaveBeenCalled()、toHaveReturnedWith(value)等斷言即可對返回值是否被正確注入、調(diào)用是否發(fā)生做完整的雙向驗證。小結(jié)圍繞 TIL 倉庫 javascript/mock-a-function-with-return-values-using-jest 這篇筆記本文完整覆蓋了jest.fn()創(chuàng)建 Mock 函數(shù)的三種方式、mockReturnValue()的恒定返回值語義、mockReturnValueOnce()的一次性語義及回落后返回undefined的細節(jié)并補充了二者組合時的優(yōu)先級規(guī)則。結(jié)合倉庫中 react/mock-a-function-that-a-component-imports、javascript/test-timing-based-code-with-jest-fake-timers 與 javascript/turn-off-console-error-messages-in-a-test 的實戰(zhàn)樣例可以看到注入返回值只是 Mock 函數(shù)能力的入口配合調(diào)用歷史斷言與一次性覆蓋足以支撐絕大多數(shù)前端與 Node 側(cè)單元測試場景。贊分享文檔教程知識庫【免費下載鏈接】til:memo: Today I Learned項目地址https://gitcode.com/gh_mirrors/ti/til點擊查看免費下載相關(guān)推薦rust-bert 在生產(chǎn)環(huán)境中的應(yīng)用案例從初創(chuàng)公司到大型企業(yè)的成功實踐rust bert 在生產(chǎn)環(huán)境中的應(yīng)用案例從初創(chuàng)公司到大型企業(yè)的成功實踐 rust bert 是一個基于 Rust 語言的原生自然語言處理NLP框架它提人工智能深度學(xué)習(xí)大模型30 Seconds of Code 實戰(zhàn)用 debouncePromise 為 JavaScript 防抖函數(shù)返回 Promise30 Seconds of Code 實戰(zhàn)用 debouncePromise 為 JavaScript 防抖函數(shù)返回 Promise 本文以 30 secon教程文檔深入解析 freeCodeCamp Basic JavaScript 課程用 return 語句返回函數(shù)值深入解析 freeCodeCamp Basic JavaScript 課程用 return 語句返回函數(shù)值 本文圍繞 freeCodeCamp 開源課程 Ba前端后端教育上一篇Austin項目實戰(zhàn)指南下一篇Anima開源項目使用教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 使用 Jest mockReturnValue 為 Mock 函數(shù)注入返回值——TIL 項目 JavaScript 實戰(zhàn)筆記
文檔教程知識庫【免費下載鏈接】til:memo: Today I Learned項目地址https://gitcode.com/gh_mirrors/ti/til點擊查看免費下載本篇技術(shù)指南聚焦 TIL 倉庫 javascript/mock-a-function-with-return-values-using-jest 所記錄的核心技巧如何用jest.fn()創(chuàng)建 Mock 函數(shù)并通過mockReturnValue()/mockReturnValueOnce()為它注入固定或一次性返回值從而讓被測代碼在無需真實依賴的情況下穩(wěn)定運行。讀完本文你將掌握 Mock 函數(shù)從創(chuàng)建、賦值、注入返回值到落地到組件測試與定時器測試的完整鏈路并了解它與mockImplementation、mockResolvedValue等姊妹 API 的關(guān)系。一、起步用 jest.fn() 創(chuàng)建 Mock 函數(shù)Jest 為處理 Mock 函數(shù)提供了一整套工具集合Mock Function API其中最基礎(chǔ)的入口就是jest.fn()。調(diào)用它即可得到一個全新的 Mock 函數(shù)該函數(shù)本身不執(zhí)行任何業(yè)務(wù)邏輯而是由測試代碼按需配置其行為。jest.fn() // 賦值給一個變量 const fakeFunc jest.fn(); // 作為 prop 傳給組件 SpecialInput handleChange{jest.fn()} /從上面的三行代碼可以看到j(luò)est.fn()的三種典型用法直接調(diào)用生成一個未綁定的 Mock 函數(shù)實例賦值給變量將 Mock 函數(shù)保存為fakeFunc后續(xù)可以通過該變量統(tǒng)一配置返回值、調(diào)用次數(shù)等行為作為 prop 傳入組件在渲染組件時傳入一個 Mock 函數(shù)如上面的handleChange用于占位并觀測組件是否正確調(diào)用了該回調(diào)。這一點在 TIL 倉庫的 react/mock-a-function-that-a-component-imports 中有直接的印證——當(dāng)組件依賴一個導(dǎo)入的函數(shù)isAuthenticated()時測試中正是用jest.fn().mockReturnValue(true)來替換真實實現(xiàn)而在 xstate/custom-jest-matcher-for-xstate-machine-states 中XState 機器的action: jest.fn()同樣以 Mock 函數(shù)來觀測動作是否被觸發(fā)。二、mockReturnValue()讓 Mock 函數(shù)始終返回指定值創(chuàng)建出 Mock 函數(shù)之后下一步就是為它配置返回值。最常用的方法是mockReturnValue(value)const fakeFunc jest.fn(); fakeFunc.mockReturnValue(hello); fakeFunc(); // hellomockReturnValue()的核心語義是無論函數(shù)被調(diào)用多少次只要沒有更優(yōu)先的一次性配置它都會返回同一個值。在上述示例中fakeFunc每次被調(diào)用都會得到字符串hello測試代碼無需關(guān)心函數(shù)內(nèi)部邏輯只需確認(rèn)當(dāng)這個函數(shù)被調(diào)用時它會返回什么這正是單元測試隔離外部依賴的關(guān)鍵手法。這種恒定返回值在真實測試場景中極其常用。TIL 倉庫的 react/mock-a-function-that-a-component-imports 給出了一個完整的落地案例// MyComponent.test.js // ... various testing imports import * as authModules from ./authentication; it(renders the component, () { authModules.isAuthenticated jest.fn().mockReturnValue(true); const wrapper shallow(MyComponent /); expect(toJson(wrapper)).toMatchSnapshot(); });這里通過import * as authModules拿到與MyComponent相同的模塊引用把isAuthenticated替換為jest.fn().mockReturnValue(true)的 Mock 版本。于是渲染MyComponent時組件內(nèi)部調(diào)用到的isAuthenticated()會返回true從而走入已認(rèn)證分支測試無需真實登錄態(tài)。反向場景只需要把返回值換成falseauthModules.isAuthenticated jest.fn().mockReturnValue(false);一句話總結(jié)mockReturnValue()的價值在于凡調(diào)用必返回讓依賴方在固定前提下被穩(wěn)定驅(qū)動。三、mockReturnValueOnce()讓返回值只生效一次與mockReturnValue()相對mockReturnValueOnce(value)只讓指定返回值生效一次隨后的調(diào)用不再返回該值const fakeFunc jest.fn(); fakeFunc.mockReturnValueOnce(hello); fakeFunc(); // hello fakeFunc(); // nullmockReturnValueOnce()的語義是第一次調(diào)用時返回配置值之后回落到 Mock 函數(shù)的默認(rèn)行為。這里有一個容易被忽略的細節(jié)需要澄清在 Jest 中未配置任何返回值/實現(xiàn)的 Mock 函數(shù)其默認(rèn)調(diào)用結(jié)果實際上是undefined而不是null原始筆記以null概括此后不再返回任何配置值這一結(jié)果讀者理解其意圖即可在編寫斷言時請以實際默認(rèn)值undefined為準(zhǔn)。該 API 最典型的用途是模擬前幾次調(diào)用返回特殊值的場景例如模擬輪詢接口第一次返回處理中后續(xù)返回已完成模擬數(shù)據(jù)庫查詢某次查詢命中緩存返回 A其余返回 B模擬需要多次調(diào)用才穩(wěn)定的第三方 SDK。四、組合運用默認(rèn)返回值 一次性覆蓋mockReturnValue()與mockReturnValueOnce()并不互斥二者組合可以表達大部分調(diào)用返回默認(rèn)值僅某幾次調(diào)用返回特殊值的行為const fakeFunc jest.fn(); fakeFunc .mockReturnValue(default) .mockReturnValueOnce(first) .mockReturnValueOnce(second); fakeFunc(); // first fakeFunc(); // second fakeFunc(); // default fakeFunc(); // default組合時的優(yōu)先級規(guī)則是一次性配置Once系列總是先于永久配置mockReturnValue系列被消費。所有Once值按注冊順序依次消耗完畢后函數(shù)才回落到mockReturnValue設(shè)置的恒定值。這一規(guī)則讓先特殊、后通用的測試編排變得非常直觀。五、倉庫實例Mock 函數(shù)在定時器與日志測試中的落地除了注入返回值jest.fn()的調(diào)用記錄能力也是斷言的核心依據(jù)。TIL 倉庫的 javascript/test-timing-based-code-with-jest-fake-timers 展示了jest.fn()與假定時器配合、用toHaveBeenCalled()驗證調(diào)用是否發(fā)生的完整流程jest.useFakeTimers(); describe(doSomethingAfter200ms, () { test(does something after 200ms (pass), () { const doSomething jest.fn(); doSomethingAfter200ms(doSomething); jest.advanceTimersByTime(201); expect(doSomething).toHaveBeenCalled(); }); });這里doSomething無需關(guān)心返回值——Mock 函數(shù)同時具備可配置行為與可觀測調(diào)用歷史兩種能力。類似的模式還出現(xiàn)在 javascript/turn-off-console-error-messages-in-a-test 中通過console.error jest.fn()屏蔽測試期的噪音輸出。結(jié)合這兩個倉庫實例可以得出jest.fn()是注入返回值 記錄調(diào)用歷史的統(tǒng)一入口而mockReturnValue只是它眾多行為配置中的一支。六、延伸mockReturnValue 的姊妹 APImockReturnValue與mockReturnValueOnce屬于 Jest Mock Function API 家族理解它們后可以順帶掌握同族的其他常用成員它們共享永久/一次性與普通值/異步值兩對維度的組合邏輯API語義mockReturnValue(value)每次調(diào)用都返回該值本文主題mockReturnValueOnce(value)僅下一次調(diào)用返回該值本文主題mockImplementation(fn)用自定義函數(shù)完全接管 Mock 函數(shù)的行為mockImplementationOnce(fn)僅下一次調(diào)用使用自定義實現(xiàn)mockResolvedValue(value)等價于mockImplementation(() Promise.resolve(value))用于返回已兌現(xiàn)的 PromisemockResolvedValueOnce(value)僅下一次調(diào)用返回已兌現(xiàn)的 PromisemockRejectedValue(value)等價于mockImplementation(() Promise.reject(value))用于模擬異步失敗選擇建議當(dāng)被測代碼只需要知道返回值時優(yōu)先用mockReturnValue系列更簡潔當(dāng)需要模擬真實邏輯或異步行為時再考慮mockImplementation與mockResolvedValue系列。配合toHaveBeenCalled()、toHaveReturnedWith(value)等斷言即可對返回值是否被正確注入、調(diào)用是否發(fā)生做完整的雙向驗證。小結(jié)圍繞 TIL 倉庫 javascript/mock-a-function-with-return-values-using-jest 這篇筆記本文完整覆蓋了jest.fn()創(chuàng)建 Mock 函數(shù)的三種方式、mockReturnValue()的恒定返回值語義、mockReturnValueOnce()的一次性語義及回落后返回undefined的細節(jié)并補充了二者組合時的優(yōu)先級規(guī)則。結(jié)合倉庫中 react/mock-a-function-that-a-component-imports、javascript/test-timing-based-code-with-jest-fake-timers 與 javascript/turn-off-console-error-messages-in-a-test 的實戰(zhàn)樣例可以看到注入返回值只是 Mock 函數(shù)能力的入口配合調(diào)用歷史斷言與一次性覆蓋足以支撐絕大多數(shù)前端與 Node 側(cè)單元測試場景。贊分享文檔教程知識庫【免費下載鏈接】til:memo: Today I Learned項目地址https://gitcode.com/gh_mirrors/ti/til點擊查看免費下載相關(guān)推薦rust-bert 在生產(chǎn)環(huán)境中的應(yīng)用案例從初創(chuàng)公司到大型企業(yè)的成功實踐rust bert 在生產(chǎn)環(huán)境中的應(yīng)用案例從初創(chuàng)公司到大型企業(yè)的成功實踐 rust bert 是一個基于 Rust 語言的原生自然語言處理NLP框架它提人工智能深度學(xué)習(xí)大模型30 Seconds of Code 實戰(zhàn)用 debouncePromise 為 JavaScript 防抖函數(shù)返回 Promise30 Seconds of Code 實戰(zhàn)用 debouncePromise 為 JavaScript 防抖函數(shù)返回 Promise 本文以 30 secon教程文檔深入解析 freeCodeCamp Basic JavaScript 課程用 return 語句返回函數(shù)值深入解析 freeCodeCamp Basic JavaScript 課程用 return 語句返回函數(shù)值 本文圍繞 freeCodeCamp 開源課程 Ba前端后端教育上一篇Austin項目實戰(zhàn)指南下一篇Anima開源項目使用教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考