3. MSW
Last updated
Last updated
μλΉμ€ μ컀λ μΉ μμ© νλ‘κ·Έλ¨, λΈλΌμ°μ , κ·Έλ¦¬κ³ (μ¬μ© κ°λ₯ν κ²½μ°) λ€νΈμν¬ μ¬μ΄μ νλ‘μ μλ² μν μ ν¨
ν¨κ³Όμ μΈ μ€νλΌμΈ κ²½νμ μμ±
λ€νΈμν¬ μμ²μ κ°λ‘μ±μ λ€νΈμν¬ μ¬μ© κ°λ₯ μ¬λΆμ λ°λΌ μ μ ν νλμ μ·¨ν¨
μλ²μ μμ°μ μ λ°μ΄νΈ
νΈμ μλ¦Όκ³Ό λ°±κ·ΈλΌμ΄λ λκΈ°ν APIλ‘μ μ κ·Όλ μ 곡
보μ μμ μ΄μ λ‘ HTTPSμμλ§ λμ
λ€νΈμν¬ μμ²μ μμ ν μ μλ€λ μ μμ μ€κ°μ 곡격μ κ΅μ₯ν μ·¨μ½νκΈ° λλ¬Έ
μΉ μ¬μ΄νΈμμ μ¬μ©ν μ μλ μ컀
λ λ€ λ³΄μ‘° μ€λ λμμ μ€νλλ―λ‘ κΈ°λ³Έ μ€λ λμ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό μ°¨λ¨νμ§ μκ³ JavaScript μ½λλ₯Ό μ€ν(λ Ό λΈλ‘νΉ)
Window λ° Document objectsμ λν μ‘μΈμ€ κΆνμ΄ μμΌλ―λ‘, DOMκ³Ό μ§μ μνΈ μμ©ν μ μμΌλ©°(DOMμ μ κ·Ό λΆκ°) λΈλΌμ°μ APIμ λν μ‘μΈμ€κ° μ νλ¨
μλͺ
μΉ μμ»€κ° μν νκ³Ό λ°μ νκ² μ°κ²°
λ 립μ
ν μ’ λ£ μ
μ’ λ£λ¨
λ°±κ·ΈλΌμ΄λμμ κ³μ μ€ν κ°λ₯
κ°―μ
μ¬λ¬ μΉ μ컀 μμ± κ°λ₯
λ±λ‘λ λ²μμ λͺ¨λ νμ± νμ μ μ΄
λ€νΈμν¬ μμ²
-
λ€νΈμν¬ μμ²μ κ°λ‘μ±(fetchμ΄λ²€νΈλ₯Ό ν΅ν΄), λ°±κ·ΈλΌμ΄λμμ νΈμ API μ΄λ²€νΈλ₯Ό μμ
μΉ μ컀μ μλͺ μ μΉ μμ»€κ° μν νκ³Ό λ°μ νκ² μ°κ²°λμ΄ μλ λ°λ©΄, μλΉμ€ μ컀μ μλͺ μ£ΌκΈ°λ λ 립μ μΉ μμ»€κ° μ€ν μ€μΈ νμ λ«μΌλ©΄ μ’ λ£λμ§λ§, μλΉμ€ μ컀λ μ¬μ΄νΈμ μ΄λ € μλ νμ± νμ΄ μλ κ²½μ°μλ λ°±κ·ΈλΌμ΄λμμ κ³μ μ€ν κ°λ₯
νμ΄μ§λ μ¬λ¬ μΉ μ컀λ₯Ό μμ±ν μ μμ§λ§, λ¨μΌ μλΉμ€ μ컀λ λ±λ‘λ λ²μμ λͺ¨λ νμ± νμ μ μ΄
μΉ μ컀μ λ¬λ¦¬ μλΉμ€ μ컀λ₯Ό μ¬μ©νλ©΄ fetchμ΄λ²€νΈλ₯Ό ν΅ν΄ λ€νΈμν¬ μμ²μ κ°λ‘μ±κ³ , λ°±κ·ΈλΌμ΄λμμ pushμ΄λ²€νΈλ₯Ό ν΅ν΄ Push API μ΄λ²€νΈλ₯Ό μμ
express λ³΄λ€ μ‘°κΈ λΆνΈν¨ μ½λ λ λ²¨μ΄ μλλΌ λ€νΈμν¬ λ 벨μμ κ°μ§ ꡬν(νλ‘μλ₯Ό μ΄μ©) μ€νλΌμΈ μμ λ±μ μ§μνκΈ° μν μλΉμ€ μ컀μ κΈ°λ₯μ μ μ©νκ² νμ©ν κ² Node, λΈλΌμ°μ λ λ€ μ§μ
π₯ Express vs MSW
λ¨μν μμ μλ²λ₯Ό λ§λ€ κ±°λΌλ©΄ Expressλ₯Ό μ°λ κ² λ λ«μ§λ§, MSWλ ν μ€νΈ μ½λλ μ§μνλ©΄μ κ²Έμ¬κ²Έμ¬ μΉ λΈλΌμ°μ λ₯Ό μ§μνλ μ©λλ‘λ λμμ§ μμ μ ν
MSWλ jestμ ν μ€νΈ νκ²½(Node.js κΈ°λ°) μΈμ μΉ λΈλΌμ°μ λ μ§μ API μ€νμ λμμ§λ§ μμ§ κ΅¬νλμ§ μμ κ²½μ° μμλ‘ μ¬μ©ν μ μμ
server.ts
νμΌ μμ±src/mocks/server.ts κ²½λ‘μ μμ±
beforeAll : Jest μμν λ 맨 μ²μμ μ€ν
onUnhandledRequest: 'error'
: handlerλ₯Ό μ μ‘μμ λ μ€λ₯ λ΄λλ‘ μ€μ
afterEach : κ° ν μ€νΈκ° λλ λλ§λ€ μ€ν
afterAll : μ λΆ λλ λ μ€ν
jest.config.js
νμΌμ βsetupFilesAfterEnvβ μμ±μ setupTests.ts
νμΌ μΆκ°
β οΈ λ무 본격μ μΌλ‘ μ½λ©νλ©΄ μ¬μ€μ λ°±μλλ₯Ό κ°λ°νκ² λλ, μ΄ λΆλΆμ μ£Όμν κ²
μ§μ§κ°μ κ²
μ΄μ§ μ§μ§
κ° μλ
μ§μ§λ ν
μ€νΈκ° νμν¨ β E2E ν
μ€νΈ
waitFor : ~ κ° λ λκΉμ§ λκΈ°
μ½λ°±ν¨μμ νμ μ΄ Promiseλ‘ λμ΄ μμ΄μ async/await νμ
fetchλ μλμ°μ μλ κ² λΈλΌμ°μ μμλ λμ§λ§ Nodeμμλ μ€λ₯ Node μ΅μ λ²μ μ fetchλ₯Ό μ§μνμ§λ§, νμ¬ μ¬μ© μ€μΈ Node λ²μ μμλ μ§μ X
β polyfill(ν΄λ¦¬ν) μ μ΄μ©ν΄ ν΄κ²°
setupTests.ts
νμΌμ importhooks/useFetchProducts.ts
νμΌ μμνλ‘ λλ리기
κΈ°λ³Έμ μΌλ‘ μ§μνμ§ μλ μ΄μ λΈλΌμ°μ μμ μ΅μ κΈ°λ₯μ μ 곡νλ λ° νμν μ½λ (μΌλ°μ μΌλ‘ μΉμ JavaScript)
μλ°μ€ν¬λ¦½νΈ μμ§μ λ§λλ κ° μ‘°μ§μ λλ¦λλ‘ μ°μ μμλ₯Ό 맀겨 λͺ μΈμ λ΄ μ΄λ€ κΈ°λ₯μ λ¨Όμ ꡬνν μ§ κ²°μ λͺ μΈμμ λ±λ‘λ κΈ°λ₯λ³΄λ€ μ΄μ(draft)μ μλ μ μμ λ¨Όμ ꡬννκΈ°λ‘ κ²°μ νλ κ²½μ°λ μ‘΄μ¬ κ΅¬ν λλκ° λμμ μ΄λ° κ²°μ μ λ΄λ¦¬λ κ²½μ°λ μμ§λ§, ꡬ미λ₯Ό λΉκΈ°μ§ μμ μ΄λ° κ²°μ μ λ΄λ¦¬κΈ°λ ν¨ μμ§μ΄ νμ€ μ 체λ₯Ό μ§μνμ§ μκ³ μΌλΆλ§ μ§μνλ κ²μ νν μΌ
μ€ νλ