snapShot Testing
1.新增畫面
新建 root/app/Home.js (若無該路徑則新建)
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={styles.wrapper}>
<Text style={styles.text}>Home Component</Text>
</View>
)
}
}
const styles = StyleSheet.create({
wrapper: {
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
fontSize: 24,
}
})
2.修改App入口
因此新建此Project時,react native版本為0.55.4,所以入口為 root/App.js 此檔 修改此檔案,如下Code (若react native較舊版時,App的入口分別為index.android.js 或者 index.ios.js) 1) import 步驟1 新建的 js 2) 修改 render function
import Home from './app/Home';
...
export default class App extends Component<Props> {
render() {
return (
<Home />
);
}
}
3.新建test
在 __tests__/下 新建 Home-test.js ps.在新建此react native專案時,不知為何__tests__此資料夾沒有自動產生,所以手動新建
import 'react-native';
import React from 'react';
import Home from '../app/Home';
import renderer from 'react-test-renderer';
test('Home snapShot', ()=>{
const snap = renderer.create(
<Home />
).toJSON();
expect(snap).toMatchSnapshot();
});
4.執行 (在此使用Android模擬器)
畫面如圖

5.執行test
打開terminal(或者PowerShell等等...),執行npm test(或者yarn test)
$ yarn test
因為是第一次執行test,可看見 1 snapshot written. ,可看到新建了 root/__tests__/__snapshots__/Home-test.js.snap 執行後結果如下圖,也附上專案結構。


參考
Last updated