change code

繼 SnapShot Testing 此篇後 (文章連結位於下方)

snapShot Testing

1.修改Home.js

修改 root/app/Home.js 內的 fontSize

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: 14,
  }
})

2.執行App，看畫面

3.執行test

$yarn test

結果如下圖，可看見紅框內的錯誤

4.更新舊有的 .snap

若確定樣是要新的畫面，則蓋掉舊的 .snap檔，作法如下

$ yarn test -- -u

結果如下圖，test成功 也 update 了 .snap，圖片下方紅框的部分，fontsize 已改為 14

參考

• React native with Jest | snapshot testing