[React Native] Jest Snapshot Testing

화면 코딩하기

/App.js

import React, { Component } from 'react';
import { 
	StyleSheet, 
	Text, 
	View,
} from 'react-native';

export default class App extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={{fontSize: 34}}>Hello</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},

});

Build 하기

$ react-native run-android

 

Test Code 작성

/__test__/App-test.js

import 'react-native';
import React from 'react';
import App from '../App';

import renderer from 'react-test-renderer';

test('App Snapshot', () => {
	const snap = renderer.create(
		<App />
	).toJSON()

	expect(snap).toMatchSnapshot()
});

Test 실행하기

$ npm test

snapshot을 실행하면 /__test__/__snapshot__/App-test.js.snap 파일이 json으로 생성됩니다.

화면 수정하기

fontSize를 34에서 24로 수정 후 Build하고 다시 test 코드를 실행합니다.

$ react-native run-android
$ npm test

저장된 /__test__/__snapshot__/App-test.js.snap에 저장된 snapshot과 다른부분이 있으면 오류가 발생합니다.

 

Snapshot 업데이트 하기

저장된 App-test.js.snap 파일을 업데이트 합니다.

$ npm test -- -u