ReactNativeのテスト紹介

React Native
のテスト紹介
February 2, 2017
Junki Kaneko
SWET Group
DeNA Co., Ltd.

View Slide

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

View Slide

*
Agenda
●
React Nativeの紹介
●
React Native Testing
○
Unit Test
○
Integration Test

View Slide

*
ReactNativeって？
● JavaScriptとReact.jsで
Nativeモバイルアプリを開発できるフレームワーク
● UIのパーツをUI Componentとして構築していく

View Slide

*
ReactNativeの特徴
● ライフサイクルを考えなくて良い
● iOS / Android のコードを一部共通化できる

View Slide

*
ReactNative (Android)
● iOSと比べると対応しているLibraryが若干少ない
https://js.coach/react-native で検索した結果
● ios : 690
● android : 610

View Slide

*
ReactNative Testing
● Unit Test : JavaScriptレベルのテストを行う
○ JEST
○ Mocha
● Integration Test : E2EのUIテスト
○ Appium

View Slide

*
JESTの特徴 (UnitTest)
● Facebook製のJavaScript Test Framwork
● ロジック的なUnitテストだけではなく、
Snapshot Testingが可能

View Slide

*
JEST Snapshot Testing (UnitTest)
● ReactComponentをJavaScript内でレンダリングし、
以前レンダリングした内容と変わっていないか
確認出来る

View Slide

*
// Sample.js
import React, {Component} from 'react';
import {
Text,
View
} from 'react-native';
export default class Sample extends Component {
render() {
return (

This is Sample

This is Test

);
}
}
// __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(

).toJSON();
expect(tree).toMatchSnapshot();
});
// __tests__/__snapshots__/Sample.js.snap
exports[`test renders correctly 1`] = `

accessible={true}
allowFontScaling={true}
ellipsizeMode="tail">
This is Sample

accessible={true}
allowFontScaling={true}
ellipsizeMode="tail">
This is Test

`;
Test Code
Component
Source Code
Snapshot
generate

View Slide

*
Integration Test (Android)
● AndroidのUI Frameworkで描写されるので、
通常のAndroid Applicationと同様にテストすることが可能
（iOSも同様）

View Slide

*
Integration Test (Android)
● iOS / Android に対応している自動テストツール

View Slide

*
Integration Test with Appium (Android)
ComponentのPropertiesとして、
● accessibilityLabel={'Something'}
を指定することによって、
contentDescriptionを埋め込める。

View Slide

*
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 (

Sample

onPress={this.onButtonPress}
title="ALERT"
accessibilityLabel="sample button"
/>

);
}
}
AppRegistry.registerComponent('sample', () => sample);

…
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">
...
class="android.widget.TextView" package="com.sample"
content-desc="sample text" checkable="false" checked="false"
focused="false" scrollable="false" long-clickable="false"
password="false" selected="false" bounds="[0,48][720,86]"
resource-id="" instance="0"/>
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">
class="android.widget.TextView" package="com.sample"
content-desc="" checkable="false" checked="false"
...
Appium
(driver.page_source)
ReactNative
AppCode
(index.android.js)
PageSource
XML

View Slide

*
● よって、以下のような指定でElementを検出できる
driver.find_element_by_xpath("//*[@content-desc='sample button']")

View Slide

*
● Xpathでしか検出できないので信頼性が低い...

View Slide

*

View Slide

*
ComponentのPropertiesとして、
● testID={'Something'}
を指定することによってtestIDを埋め込める？

View Slide

*
● iOSは以下のような指定でElementを検出できるそう
なのでAndroidでも試してみる
driver.find_element_by_name("Something")

View Slide

*
Integration Tes with Appium (Android)

View Slide

*
しかし、今現在のAppiumでは
AndroidのViewTagを検出することができない...

View Slide

*
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

View Slide

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

View Slide

*
THANKS FOR LISTENING

View Slide

ReactNativeのテスト紹介

ReactNativeのテスト紹介

Junki Kaneko

More Decks by Junki Kaneko

Featured

Transcript