$30 off During Our Annual Pro Sale. View Details »

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

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 の利用を検討中です。

ariiyu

March 28, 2019
Tweet

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. גࣜձࣾΩονϋΠΫ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. View Slide

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

    View Slide

  10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. View Slide

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

    View Slide


  16. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    => ίʔυ౷ҰͷͨΊɺ by.text() Ͱ͸ͳ͘ by.id() Λ࢖ͬͯཁૉΛݕग़͢Δ࣮૷ʹมߋͨ͠

    View Slide

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

    View Slide

  24. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide