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

ReactNativeのテスト紹介

Junki Kaneko
February 03, 2017
1k

 ReactNativeのテスト紹介

Junki Kaneko

February 03, 2017
Tweet

Transcript

  1. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Profile

    • 名前: 金子 淳貴 ◦ 所属 ▪ DeNA システム部 SWET Group Testinfra Team ◦ 経歴 ▪ インフラ構築運用 / DevOps, CI基盤開発 / QA  → テストインフラ開発 ◦ 普段の業務 ▪ UI自動テストシステムの開発 ▪ バージョンアップ自動検証システムの開発
  2. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Agenda

    • React Nativeの紹介 • React Native Testing ◦ Unit Test ◦ Integration Test
  3. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNativeって?

    • JavaScriptとReact.jsで Nativeモバイルアプリを開発できるフレームワーク • UIのパーツをUI Componentとして構築していく
  4. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNativeの特徴

    • ライフサイクルを考えなくて良い • iOS / Android のコードを一部共通化できる
  5. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNative

    (Android) • iOSと比べると対応しているLibraryが若干少ない https://js.coach/react-native で検索した結果 • ios : 690 • android : 610
  6. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNative

    Testing • Unit Test : JavaScriptレベルのテストを行う ◦ JEST ◦ Mocha • Integration Test : E2EのUIテスト ◦ Appium
  7. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. JESTの特徴

    (UnitTest) • Facebook製のJavaScript Test Framwork • ロジック的なUnitテストだけではなく、 Snapshot Testingが可能
  8. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. JEST

    Snapshot Testing (UnitTest) • ReactComponentをJavaScript内でレンダリングし、 以前レンダリングした内容と変わっていないか 確認出来る
  9. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. //

    Sample.js import React, {Component} from 'react'; import { Text, View } from 'react-native'; export default class Sample extends Component { render() { return ( <View> <Text> This is Sample </Text> <Text> This is Test </Text> </View> ); } } // __tests__/Sample-test.js import 'react-native'; import React from 'react'; import Sample from '../Sample'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer.create( <Sample /> ).toJSON(); expect(tree).toMatchSnapshot(); }); // __tests__/__snapshots__/Sample.js.snap exports[`test renders correctly 1`] = ` <View> <Text accessible={true} allowFontScaling={true} ellipsizeMode="tail"> This is Sample </Text> <Text accessible={true} allowFontScaling={true} ellipsizeMode="tail"> This is Test </Text> </View> `; Test Code Component Source Code Snapshot generate
  10. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test (Android) • AndroidのUI Frameworkで描写されるので、 通常のAndroid Applicationと同様にテストすることが可能 (iOSも同様)
  11. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test (Android) • iOS / Android に対応している自動テストツール
  12. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) ComponentのPropertiesとして、 • accessibilityLabel={'Something'} を指定することによって、 contentDescriptionを埋め込める。
  13. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) import React, { Component } from 'react'; import { Alert, AppRegistry, Button, Text, View } from 'react-native'; export default class sample extends Component { onButtonPress() { Alert.alert('This is Alert Title', 'Button has been pressed'); } render() { return ( <View accessibilityLabel="sample view"> <Text accessibilityLabel="sample text"> Sample </Text> <Button onPress={this.onButtonPress} title="ALERT" accessibilityLabel="sample button" /> </View> ); } } AppRegistry.registerComponent('sample', () => sample); <?xml version="1.0" encoding="UTF-8"?> … <android.view.ViewGroup index="0" text="" class="android.view.ViewGroup" package="com.sample" content-desc="sample view" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,48][720,156]" resource-id="" instance="0"> ... <android.widget.TextView index="0" text="Sample" class="android.widget.TextView" package="com.sample" content-desc="sample text" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,48][720,86]" resource-id="" instance="0"/> <android.widget.Button index="1" text="" class="android.widget.Button" package="com.sample" content-desc="sample button" checkable="false" checked="false" clickable="false" enabled="true" focusable="true" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,86][720,156]" resource-id="" instance="0"> <android.widget.TextView index="0" text="ALERT" class="android.widget.TextView" package="com.sample" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" ... Appium (driver.page_source) ReactNative AppCode (index.android.js) PageSource XML
  14. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) • よって、以下のような指定でElementを検出できる driver.find_element_by_xpath("//*[@content-desc='sample button']")
  15. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) • Xpathでしか検出できないので信頼性が低い...
  16. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) ComponentのPropertiesとして、 • testID={'Something'} を指定することによってtestIDを埋め込める?
  17. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) • iOSは以下のような指定でElementを検出できるそう なのでAndroidでも試してみる driver.find_element_by_name("Something")
  18. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) • iOSは以下のような指定でElementを検出できるそう なのでAndroidでも試してみる driver.find_element_by_name("Something")
  19. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) しかし、今現在のAppiumでは AndroidのViewTagを検出することができない...
  20. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) 開発状況 ReactNative => testIDをresource-idに埋め込むように • https://github.com/facebook/react-native/issues/9777 • https://github.com/facebook/react-native/pull/9942 Appium => ViewTagを検出できるように • https://github.com/appium/appium/issues/6025
  21. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration

    Test with Appium (Android) 開発状況 ReactNative => testIDをresource-idに埋め込むように • https://github.com/facebook/react-native/issues/9777 • https://github.com/facebook/react-native/pull/9942 Appium => ViewTagを検出できるように • https://github.com/appium/appium/issues/6025
  22. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Finally

    AppiumでAndroidのテストを書くのは もう少し待った方が良さそう