2. React Testing Library
1. React Testing Library
React Testing Library κΉνλΈ React Testing Library 곡μ λ¬Έμ jest-dom
π‘ React μ»΄ν¬λνΈλ₯Ό μ¬μ©μ μ μ₯μ κ°κΉκ² ν μ€νΈν μ μλ λꡬ UI ν μ€νΈμ νΉνλ λΌμ΄λΈλ¬λ¦¬ E2E Testμ²λΌ μ¬μ© κ°λ₯ β λΈλΌμ°μ μμ μ¬μ©μκ° μ€μ λ‘ μ¬μ©νλ―μ΄ ν μ€νΈ
π κΈ°μ‘΄μ λꡬ
enzyme μ¬μ©μ μ μ₯μμ 보λ€λ ν΄νΉνλ λλμΌλ‘ μ¬μ©νλλ‘ λμ΄ μμμ React Testing Libraryλ ꡬν μ체λ ν΄νΉνλ κ²μ²λΌ λμ΄ μμ§λ§, μ¬μ©μ μ μ₯μ κ°κΉκ² λ§λ€μ΄μ§
π€ React Testing Libraryλ? μΉ λΈλΌμ°μ κ° μλ κ³³μμλ documentλ₯Ό μΈ μ μμ§λ§, κ·Έλ° κ²μ κ°λ₯νκ² ν΄μ€ jestλ nodeμμ λμκ°λλ° React Testing Libraryλ DOM κ΄λ ¨ λ©μλλ₯Ό μ¬μ©ν μ μκ³ , κ·Έ μμ reactλ₯Ό μΉμ΄μ λ리면 ν μ€νΈ κ°λ₯
μ₯μ
λΉ λ₯΄κ² μλ
ν μ€νΈ μλλ¦¬μ€ μμ±μ΄ μ¬μ
render
λ₯Ό μ΄μ©νλ©΄ Main.tsxμ renderμ λΉμ·νμ§λ§ ν¨μ¬ μ½κ² μ¬μ© κ°λ₯
2. given - when - then ν¨ν΄
λͺ¨λ BDD μλ리μ€μ μλ 3κ°μ§ ν΅μ¬ μμ
GIVEN (context, λ¬Έλ§₯ μ€λͺ )
WHEN (action, λμ μ€λͺ ) : ~ ν λμμ νλ©΄
THEN (outcome, κ²°κ³Ό μ€λͺ ) : ~ μ΄λ κ² λλ€
μΌμ΄μ€λ₯Ό λλ μ½λλ₯Ό μ§κΈ° λλ¬Έμ ννλ ₯μ΄ μ’μμ§κ³ , λ€μν μν©μ λν΄ κ³ λ―Όν μ μμ
3. ν
μ€νΈ μ½λ μμ±νκΈ°
μ£Όμμ
π‘ UIλ κ΄μ¬μ¬μ λΆλ¦¬λ₯Ό ν΅ν΄ λΉμ¦λμ€ λ‘μ§κ³Ό λΆλ¦¬νλ κ²μ κΆμ₯ λ²μ©μ±μ΄ 컀μ§κ³ λ€λ₯Έ κ³³μμ ν°μ§λ κ²μ λ°©μ§νκΈ° μν΄ μ²μλΆν° UIλ₯Ό λλλ‘ κ°λ¨νκ² ν κ²
κ³΅μ© λ‘μ§μ μ΄μ΄νκ² λ§λ€κΈ°
λλ¨Έμ§ λΆλΆμ λͺ¨λμ λͺ¨νΉνκ±°λ λ°±μλ λΆλΆμ MSWλ₯Ό μ¬μ©ν΄ μ²λ¦¬νκΈ°
μ»΄ν¬λνΈμ μΈν°νμ΄μ€ μ κ²
ν μ€νΈ μ½λ(μ»΄ν¬λνΈλ₯Ό μ¬μ©νλ μ½λ)λ₯Ό μμ±νλ©΄μ ν΄λΉ μ»΄ν¬λνΈμ μΈν°νμ΄μ€λ₯Ό μ κ² κ°λ₯
κΈ°μ‘΄μ λ¬Έμ
labelμ΄ λΉ μ Έμλ λ¬Έμ
text κ°μ΄ λ²μ©μ μΈ ννμ μ¬μ©νμ§ μμ λ¬Έμ
ν μ€νΈλΆν° μμ±νκ±°λ λΉ λ₯΄κ² ν μ€νΈ μ½λλ₯Ό μμ±νλ€λ©΄, μμ±νκΈ° μ λλ μ§νμ λ¬Έμ λ₯Ό λ°κ²¬ν΄μ μμ ν μ μμμ κ² β οΈ μκ°μ΄ μ§λλ©΄ ν΄λΉ μ½λμ λν μ§μμ΄ κ°μνκ³ , μμ κ°λ κ°μνκΈ° λλ¬Έμ 건λ리기 νλ μ½λκ° λλ μ£Όμ
BDD μ€νμΌλ‘ μ½λ μμ , μ
λ ₯ κΈ°λ₯ ν
μ€νΈ
BDD μ€νμΌλ‘ μ½λλ₯Ό λ°κΎΈκ³ , μ λ ₯ λ±μ΄ μ μλνλμ§ νμΈ
1. context λΆλ¦¬
2. render ν¨μ μμ±, λͺ¨νΉ ν¨μ μ΄κΈ°ν μ²λ¦¬
describe-contextλ‘ λλ μ€μλ‘ μμνκ² μ§νλ¨
λ°λ³΅λλ μ½λλ₯Ό Extract Function
fireEvent λ±μ ν΅ν΄ μΈν°λμ λ§ κ²μ¦
λ§μ½ 볡μ‘ν λ‘μ§μ΄ μ»΄ν¬λνΈλ‘λΆν° λΆλ¦¬λλ€λ©΄, μ¬κΈ°μλ μ΄κ²λ§ κ²μ¦νλ©΄ λ¨
Ex. setTextμ μ«μλ§ μ λ ₯λ°κ² νκ³ μΆλ€λ©΄, μ»΄ν¬λνΈμμ κ·Έλ° λ‘μ§μ ꡬννλ κ²μ΄ μλλΌ ν μ€νΈ ν λ κ·Έλ κ² λμνλλ‘ μμ±νλ©΄ λ¨
π‘ μ»΄ν¬λνΈμ μ± μμ΄ μλκ² λ¨
API μμ² μ½λ λͺ¨νΉ
μΈλΆ μμ‘΄μ±μ΄ ν° μ½λ(API μμ² λ±)λ₯Ό μμ±ν κ²½μ°, ν΄λΉ λΆλΆλ§ κ°μ§λ‘ ꡬν
λ§€λ² μλ²λ₯Ό λμ°κΈ° μ΄λ ΅κ³ , μ€μλ²λ₯Ό μ¬μ©νκΈ° μ΄λ €μ΄ λ¬Έμ λ₯Ό λ°©μ§νκΈ° μν΄ ν μ€νΈμμλ§ κ°μ§λ‘ μλ²λ₯Ό ꡬν νλ‘ νΈμλλ μΌλ°μ μΌλ‘ λ°±μλμ μν΅νλ λΉμ€μ΄ νΌ π‘ μ΄ λΆλΆμ νλμ© κ°μ§ ꡬνμΌλ‘ λ°κΎΈλ€ 보면 μ΄λ €μ΄ κ²½μ°κ° λ°μ β MSW λ± λ€λ₯Έ λμμ κ³ λ €
4. Mocking
κ°μ§λ‘ μ λ κ²
ν
μ€νΈλ₯Ό μνν λͺ¨λ
κ³Ό μ°κ²°λλ μΈλΆμ λ€λ₯Έ μλΉμ€λ λͺ¨λ
μ
μ€μ μ¬μ©νλ λͺ¨λ
μ μ¬μ©νμ§ μκ³ μ€μ μ λͺ¨λμ νλ΄λ΄λ κ°μ§ λͺ¨λμ μμ± β ν
μ€νΈμ ν¨μ©μ±μ λμ
μλνλ ν
μ€νΈλ₯Ό μννκΈ° μ΄λ €μΈ λ μ£Όλ‘ μ¬μ©
π TDDμμ κ΄κ³
ν μ€νΈ μ£Όλ κ°λ°(TDD)μμλ μλνλ ν μ€νΈκ° νμμ μΈ μμ μ€μ νλ λͺ¨μ κ°μ²΄λ₯Ό μ΄μ©νλ©΄ μλΉ λΆλΆμ ν μ€νΈλ₯Ό μ¬μ©μμ κ°μ μμ΄ μλν ν μ μμ
μ¬μ© μμ
μ¬μ©μ μΈν°νμ΄μ€(UI) ν μ€νΈ : μ¬μ©μμ λ°μμ΄ νμν ν μ€νΈλ₯Ό μνν κ²½μ°, μ¬μ©μκ° ν μ€νΈμ μ°Έμ¬ν΄μΌ νκΈ° λλ¬Έμ μλνλ ν μ€νΈ μνμ΄ μ΄λ €μ. λͺ¨μ κ°μ²΄λ₯Ό μ΄μ©ν΄ μ¬μ©μμ μλ΅μ νλ΄λ΄μ΄ μ¬μ©μμ κ°μ μμ΄λ ν μ€νΈλ₯Ό μν
λ°μ΄ν°λ² μ΄μ€(DB) ν μ€νΈ : μλ£μ λ³κ²½μ μλ°νλ λ°μ΄ν°λ² μ΄μ€μ λν μμ μ ν μ€νΈ νλ κ²½μ°, ν μ€νΈ μν ν λ§€λ² λ°μ΄ν°λ² μ΄μ€μ μλ£λ₯Ό μλλλ‘ λλ €λμΌ νλλ°, λͺ¨μ κ°μ²΄λ₯Ό μ΄μ©ν΄ λ°μ΄ν°λ² μ΄μ€μ μλ΅μ νλ΄λ΄μ΄ λ°μ΄ν°μ λ³κ²½ μμ΄ ν μ€νΈκ° κ°λ₯
5. Test fixture
μννΈμ¨μ΄λ₯Ό μΌκ΄λκ² ν μ€νΈνκΈ° μν΄ μ¬μ©λλ νκ²½ ν κ³³μ λͺ°μμ λ€λ₯Έ κ³³μμ μ¬μ©νκΈ° νΈλ¦¬ν¨
μ₯μ
κ° ν μ€νΈκ° νμ λμΌν μ€μ μΌλ‘ μμνκΈ° λλ¬Έμ ν μ€νΈλ₯Ό λ°λ³΅ν μ μμ
λ©μλλ₯Ό λ€λ₯Έ ν¨μλ‘ λΆλ¦¬νκ³ κ° κΈ°λ₯μ λ€λ₯Έ ν μ€νΈμ μ¬μ¬μ©ν μ μμ
ν μ€νΈ μ½λ μ€κ³κ° μ©μ΄ν¨
μ΄μ ν μ€νΈ μ€νμμ λ¨μ νλͺ©μΌλ‘ μμ νλ λμ , μλ €μ§ μ΄κΈ° μνλ‘ ν μ€νΈλ₯Ό 미리 ꡬμ±
ν΄λ ꡬ쑰
1. μ§μ μ¬μ©νλ κ²½μ°
2. mocks ν΄λλ₯Ό λΆλ¦¬ν κ²½μ°
볡μ‘ν΄μ§λ©΄ μ΄ λ°©λ²μ μ¬μ©
Last updated