snapShot Testing

以下 root 為 React Native Project 的主目錄

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