Upgrade to Pro — share decks privately, control downloads, hide ads and more …

E2EテストライブラリDetoxの導入でハマった話 / Struggle with intro...

Avatar for ariiyu ariiyu
March 28, 2019

E2EテストライブラリDetoxの導入でハマった話 / Struggle with introduction of E2E test library Detox

「【第3回】ReactNativeにゆかりのあるスタートアップが集う会」でのLT登壇資料です。
https://r-n.connpass.com/event/121961/

Detox の利用を検討中です。

Avatar for ariiyu

ariiyu

March 28, 2019
Tweet

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • Yusuke Ariyoshi (@ariiyu) • ΢Υζגࣜձࣾ ୅ද݉ΤϯδχΞ • React

    Native 1೥൒ɺiOS 4೥Ҏ্ Python ΍ Ruby ΋ • QiitaهࣄʮReact NativeͰiOSΞϓϦΛ࡞ͬͯετΞ ͰϦϦʔεͯ͠Έͨʯ
  2. E2EςετɾࣗಈԽͷͨΊͷ ϑϨʔϜϫʔΫ "Detox" • ΫϩεϓϥοτϑΥʔϜ iOS / Android • σόΠε্Ͱಈ͘

    ※iOS͸ݱ࣌఺ͰγϛϡϨʔλͷΈαϙʔτ • ࣗಈಉظ • CI্Ͱಈ͘ • ςετϥϯφʔͱಠཱ͍ͯ͠Δ • σόοΨϒϧ
  3. Detox ͷ࢓૊Έ • ςετͱΞϓϦͱ͍͏2ͭͷύʔτ Detox server ͕஥հ • ςετ͸ඇಉظ ςετߦ͝ͱʹΞϓϦͷԠ౴Λ଴ͭ

    • Detox ͸ࣗಈతʹςετͱΞϓϦΛಉظ͢Δ https://github.com/wix/Detox/blob/master/docs/Introduction.HowDetoxWorks.md ΑΓ => sleep() Λॻ͔ͳͯ͘ࡁΉ => ςετ͕҆ఆ͢Δ (eliminates flakiness)
  4. Detox ͕ࣗಈతʹಉظ͠Α͏ͱ͢Δ ΦϖϨʔγϣϯ • Network requests ඈߦதͷશͯͷωοτϫʔΫϦΫΤετͱͷ௥੻ͱɺ׬ྃͷ଴ػ • Main thread

    (native) ະղܾͷωΠςΟϒͷϝΠϯεϨουͷΦϖϨʔγϣϯ • Layout of UI ඇಉظͷReact Native ͷϨΠΞ΢τͱͦͷshadow queue ͷ௥੻ • Timers setTimeout ͷΑ͏ͳλΠϚʔͷ௥੻ͱɺظݶ੾Εͷ଴ػ • Animations ະղܾͷΞχϝʔγϣϯͷ௥੻ͱɺ׬ྃͷ଴ػ • React Native JavaScript thread ະղܾͷඇಉظ࣮ߦΛؚΉJavaScript ͷΠϕϯτϧʔϓͷ௥੻ • React Native bridge ඇಉظͷϝοηʔδΛӡͿReact Native ϒϦοδͷ௥੻
  5. ஍ಓʹσόοάͨ͠ • ΤϥʔϩάΛಡΉ • ଴ػ͕௕͍ॲཧΛ஌Δ => $ detox test --debug-synchronization

    10000 • View Hierarchy Λ֬ೝ͢Δ • ࣗಈಉظΛΦϑʹͯ͠ΈΔ => await device.disableSynchronization() Λࢼ͢΋ࠓճ͸ޮՌͳ͠... • ίϯϙʔωϯτ͝ͱʹΞϓϦέʔγϣϯίʔυΛίϝϯτΞ΢τ ͍ͯ͘͠
  6. Xcode ্Ͱ΋֬ೝ - Simulator Λ attach ͢Δ - Debug View

    Hierarchy Λԡ͢ ίϯϙʔωϯτʹ ༩͑ͨtestID (Ϣʔβʔ͔Β͸ݟ͑ͳ͍͕) ίϯϙʔωϯτ͕ϨΠΞ΢τ͞Ε͍ͯΔ
  7. ࠓճͷ໰୊ • Network requests ඈߦதͷશͯͷωοτϫʔΫϦΫΤετͱͷ௥੻ͱɺ׬ྃͷ଴ػ • Main thread (native) ωΠςΟϒͷͷະղܾͷϝΠϯεϨουͷΦϖϨʔγϣϯ

    • Layout of UI ඇಉظͷReact Native ͷϨΠΞ΢τͱͦͷshadow queue ͷ௥੻ • Timers setTimeout ͷΑ͏ͳλΠϚʔͷ௥੻ͱɺظݶ੾Εͷ଴ػ • Animations ະղܾͷΞχϝʔγϣϯͷ௥੻ͱɺ׬ྃͷ଴ػ • React Native JavaScript thread ະղܾͷඇಉظ࣮ߦΛؚΉJavaScript ͷΠϕϯτϧʔϓͷ௥੻ • React Native bridge ඇಉظͷϝοηʔδΛӡͿReact Native ϒϦοδͷ௥੻
  8. ࢑ఆରॲ • ςετͷͱ͖͚ͩಛఆϑΝΠϧΛࠩ͠ସ͑ͨ 1. rn-cli.config.js Ͱద੾ʹઃఆΛߦ͓ͬͯ͘ 2. yourFile.js ͷྡʹςετ༻ͷ yourFile.e2e.isΛઃஔ

    3. $ RN_SRC_EXT=e2e.js react-native start Λ࣮ߦ • (Ͱ͖Ε͹ɺͦ΋ͦ΋ͷΞϓϦέʔγϣϯͷ࣮૷Λݟ௚͍ͨ͠...)
  9. ଞʹࠔͬͯରॲͨ͠ͱ͜Ζ • action ର৅ͷཁૉ͕ग़ݱ͢Δલʹςετ͕ࣦഊ͢Δʁ => waitFor() ͱ withTimeOut() Λ࢖ͬͯճආͨ͠ •

    Push ௨஌ڐՄͷΞϥʔτͰਐΊͳ͍ʁ => await device.launchApp({ permissions: { notifications: 'NO' } }); ͰઃఆͰ͖ͨ • Android Ͱཁૉ͕ݕग़͞Εͳ͍ʁ => by.text() Λ࢖͏࣌ʹɺiOS ͱ Android ͰҟͳΔίʔυΛॻ͘ඞཁ͕͋ͬͨ
 => ίʔυ౷ҰͷͨΊɺ by.text() Ͱ͸ͳ͘ by.id() Λ࢖ͬͯཁૉΛݕग़͢Δ࣮૷ʹมߋͨ͠