「【第3回】ReactNativeにゆかりのあるスタートアップが集う会」でのLT登壇資料です。 https://r-n.connpass.com/event/121961/
Detox の利用を検討中です。
E2EςετϥΠϒϥϦDetox ͷಋೖͰϋϚͬͨYusuke Ariyoshi2019/3/28
View Slide
ࣗݾհ• Yusuke Ariyoshi (@ariiyu)• Υζגࣜձࣾ ද݉ΤϯδχΞ• React Native 1ɺiOS 4Ҏ্ Python Ruby • QiitaهࣄʮReact NativeͰiOSΞϓϦΛ࡞ͬͯετΞͰϦϦʔεͯ͠Έͨʯ
ΩονϋΠΫRNΞϓϦͷ։ൃ
גࣜձࣾΩονϋΠΫ
E2EςετɾࣗಈԽͷͨΊͷϑϨʔϜϫʔΫ "Detox"• ΫϩεϓϥοτϑΥʔϜ iOS / Android• σόΠε্Ͱಈ͘ ※iOSݱ࣌ͰγϛϡϨʔλͷΈαϙʔτ• ࣗಈಉظ• CI্Ͱಈ͘• ςετϥϯφʔͱಠཱ͍ͯ͠Δ• σόοΨϒϧ
Detox ΛͬͨςετͷྫίϚϯυҰͭͰ͜ΕΒ͕ࣗಈ࣮ߦ͞ΕΔΞϓϦΛΫϦʔϯΠϯετʔϧ͢Δʮ࣍ʯΛλοϓ͢Δࢦఆͨ͠ཁૉΛλοϓ͢Δࢦఆͨ͠ཁૉ͕ਖ਼͘͠දࣔ͞ΕΔexpectactionactiondevice
ݕূ࣌ͷόʔδϣϯ• React Native v0.56.1• Detox v10.0.12
λΠϜΞτͰςετ͕ίέΔ(͜ͷ··ͰϝΠϯͷը໘Ҏ߱ͷςετ͕Ͱ͖ͳ͍...)
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 ͕Կ͔ͷඇಉظΦϖϨʔγϣϯΛߟྀʹೖΕΔ͜ͱ͕ग़དྷ͍ͯͳ͍
ಓʹσόοάͨ͠• ΤϥʔϩάΛಡΉ• ػ͕͍ॲཧΛΔ=> $ 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
͋Γ͕ͱ͏͍͟͝·ͨ͠