ReactNativeのテスト紹介

Transcript

1. React Native のテスト紹介 February 2, 2017 Junki Kaneko SWET Group DeNA Co., Ltd.
2. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Profile • 名前: 金子 淳貴 ◦ 所属 ▪ DeNA システム部 SWET Group Testinfra Team ◦ 経歴 ▪ インフラ構築運用 / DevOps, CI基盤開発 / QA 　→ テストインフラ開発 ◦ 普段の業務 ▪ UI自動テストシステムの開発 ▪ バージョンアップ自動検証システムの開発
3. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Agenda • React Nativeの紹介 • React Native Testing ◦ Unit Test ◦ Integration Test
4. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNativeって？ • JavaScriptとReact.jsで Nativeモバイルアプリを開発できるフレームワーク • UIのパーツをUI Componentとして構築していく
5. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNativeの特徴 • ライフサイクルを考えなくて良い • iOS / Android のコードを一部共通化できる
6. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNative (Android) • iOSと比べると対応しているLibraryが若干少ない https://js.coach/react-native で検索した結果 • ios : 690 • android : 610
7. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ReactNative Testing • Unit Test : JavaScriptレベルのテストを行う ◦ JEST ◦ Mocha • Integration Test : E2EのUIテスト ◦ Appium
8. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. JESTの特徴 (UnitTest) • Facebook製のJavaScript Test Framwork • ロジック的なUnitテストだけではなく、 Snapshot Testingが可能
9. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. JEST Snapshot Testing (UnitTest) • ReactComponentをJavaScript内でレンダリングし、 以前レンダリングした内容と変わっていないか 確認出来る
10. * 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
11. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test (Android) • AndroidのUI Frameworkで描写されるので、 通常のAndroid Applicationと同様にテストすることが可能 （iOSも同様）
12. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test (Android) • iOS / Android に対応している自動テストツール
13. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) ComponentのPropertiesとして、 • accessibilityLabel={'Something'} を指定することによって、 contentDescriptionを埋め込める。
14. * 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
15. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) • よって、以下のような指定でElementを検出できる driver.find_element_by_xpath("//*[@content-desc='sample button']")
16. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) • Xpathでしか検出できないので信頼性が低い...
17. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android)
18. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) ComponentのPropertiesとして、 • testID={'Something'} を指定することによってtestIDを埋め込める？
19. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) • iOSは以下のような指定でElementを検出できるそう なのでAndroidでも試してみる driver.find_element_by_name("Something")
20. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) • iOSは以下のような指定でElementを検出できるそう なのでAndroidでも試してみる driver.find_element_by_name("Something")
21. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Tes with Appium (Android)
22. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Integration Test with Appium (Android) しかし、今現在のAppiumでは AndroidのViewTagを検出することができない...
23. * 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
24. * 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
25. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Finally AppiumでAndroidのテストを書くのは もう少し待った方が良さそう
26. * Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. THANKS FOR LISTENING