E2EςετϥΠϒϥϦ Detox ͷಋೖͰϋϚͬͨ࿩ Yusuke Ariyoshi 2019/3/28

ࣗݾ঺հ • Yusuke Ariyoshi (@ariiyu) • ΢Υζגࣜձࣾ ୅ද݉ΤϯδχΞ • React Native 1೥൒ɺiOS 4೥Ҏ্ Python ΍ Ruby ΋ • QiitaهࣄʮReact NativeͰiOSΞϓϦΛ࡞ͬͯετΞ ͰϦϦʔεͯ͠Έͨʯ

ΩονϋΠΫRNΞϓϦͷ։ൃ

גࣜձࣾΩονϋΠΫ

E2EςετɾࣗಈԽͷͨΊͷ ϑϨʔϜϫʔΫ "Detox" • ΫϩεϓϥοτϑΥʔϜ iOS / Android • σόΠε্Ͱಈ͘ ※iOS͸ݱ࣌఺ͰγϛϡϨʔλͷΈαϙʔτ • ࣗಈಉظ • CI্Ͱಈ͘ • ςετϥϯφʔͱಠཱ͍ͯ͠Δ • σόοΨϒϧ

Detox Λ࢖ͬͨςετͷྫ ίϚϯυҰͭͰ͜ΕΒ͕ࣗಈ࣮ߦ͞ΕΔ ΞϓϦΛΫϦʔϯ Πϯετʔϧ͢Δ ʮ࣍΁ʯ Λλοϓ͢Δ ࢦఆͨ͠ཁૉ Λλοϓ͢Δ ࢦఆͨ͠ཁૉ͕ ਖ਼͘͠දࣔ͞ΕΔ expect action action device

ݕূ࣌ͷόʔδϣϯ • React Native v0.56.1 • Detox v10.0.12

No content

λΠϜΞ΢τͰςετ͕ίέΔ (͜ͷ··Ͱ͸ϝΠϯͷը໘Ҏ߱ͷςετ͕Ͱ͖ͳ͍...)

No content

Detox ͷ࢓૊Έ • ςετͱΞϓϦͱ͍͏2ͭͷύʔτ Detox server ͕஥հ • ςετ͸ඇಉظ ςετߦ͝ͱʹΞϓϦͷԠ౴Λ଴ͭ • Detox ͸ࣗಈతʹςετͱΞϓϦΛಉظ͢Δ https://github.com/wix/Detox/blob/master/docs/Introduction.HowDetoxWorks.md ΑΓ => sleep() Λॻ͔ͳͯ͘ࡁΉ => ςετ͕҆ఆ͢Δ (eliminates flakiness)

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 ϒϦοδͷ௥੻

ࣗಈಉظ্͕ख͘ಇ͍͍ͯͳ͍࣌ͷݱ৅ • ςετ͕ϋϯάͯ͠λΠϜΞ΢τͯ͠͠·͏ ଴ػ͕௕͗͢ΔɻDetox ͕ඇಉظΦϖϨʔγϣϯΛ଴ͪଓ͚Δ • expect() ͔ action() ͷ࣌఺Ͱཁૉ͕ݟ͔ͭΒͳ͍ ଴ػ͕े෼Ͱͳ͍ɻDetox ͕Կ͔ͷඇಉظΦϖϨʔγϣϯΛߟྀʹೖΕΔ͜ͱ͕ग़དྷ͍ͯͳ ͍

No content

஍ಓʹσόοάͨ͠ • ΤϥʔϩάΛಡΉ • ଴ػ͕௕͍ॲཧΛ஌Δ => $ detox test --debug-synchronization 10000 • View Hierarchy Λ֬ೝ͢Δ • ࣗಈಉظΛΦϑʹͯ͠ΈΔ => await device.disableSynchronization() Λࢼ͢΋ࠓճ͸ޮՌͳ͠... • ίϯϙʔωϯτ͝ͱʹΞϓϦέʔγϣϯίʔυΛίϝϯτΞ΢τ ͍ͯ͘͠

⁉

ແݶϧʔϓΞχϝʔγϣϯ͕ݪҼ • Detox ͸σϑΥϧτͰ͸Ξχϝʔγϣϯ͕׬ྃ͢Δ·Ͱ଴ ͭɻऴΘΒͳ͍Ξχϝʔγϣϯ͕͋ΔͱDetox ͸ϋϯά͢Δ • ࠓճ͸ɺϢʔβʔ͔Βݟ͑ͳ͍ҐஔͰΞχϝʔγϣϯ͕܁Γ ฦ͞Ε͍ͯͨ (Animated.Loop ͕·ͩແ͍ࠒʹಠ࣮ࣗ૷ͨ͠΍ͭ...)

Xcode ্Ͱ΋֬ೝ - Simulator Λ attach ͢Δ - Debug View Hierarchy Λԡ͢ ίϯϙʔωϯτʹ ༩͑ͨtestID (Ϣʔβʔ͔Β͸ݟ͑ͳ͍͕) ίϯϙʔωϯτ͕ϨΠΞ΢τ͞Ε͍ͯΔ

ࠓճͷ໰୊ • 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 ϒϦοδͷ௥੻

࢑ఆରॲ • ςετͷͱ͖͚ͩಛఆϑΝΠϧΛࠩ͠ସ͑ͨ 1. rn-cli.config.js Ͱద੾ʹઃఆΛߦ͓ͬͯ͘ 2. yourFile.js ͷྡʹςετ༻ͷ yourFile.e2e.isΛઃஔ 3. $ RN_SRC_EXT=e2e.js react-native start Λ࣮ߦ • (Ͱ͖Ε͹ɺͦ΋ͦ΋ͷΞϓϦέʔγϣϯͷ࣮૷Λݟ௚͍ͨ͠...)

τϥϒϧγϡʔςΟϯάʹ͋ͨͬͯ • Detox ͷυΩϡϝϯτʹ·ͱ·͍ͬͯΔ • Issue ΋ࢀߟʹͳΔ • ࣗಈಉظͷ࢓૊Έ͸͍ͭ΋্ख͘ಇ͘ͱ͸ݶ Βͳ͍ 100%ͷέʔεͰਖ਼͘͠ಈ͔͢ͷ͸೉͍͠ɺͱυΩϡϝϯτʹॻ͔Ε͍ͯΔ

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

·ͱΊ • Detox ͰE2EςετΛࣗಈԽग़དྷͦ͏ • ݱஈ֊Ͱ͸ workaround ͬΆ͍ίʔυ΋ඞཁʁ Ͱ͖Ε͹ΞϓϦέʔγϣϯͷ࣮૷΍ςετίʔυΛݟ௚ͯ͠ղܾ͍ͨ͠Ͱ͕͢... • Detox ஥ؒ૿΍͍ͨ͠ ׆ൃʹ։ൃ͞Ε͍ͯΔɻελʔ4000Ҏ্ɺIssue 100ݸҎ্ open

͋Γ͕ͱ͏͍͟͝·ͨ͠