[React Native] Jest - props 테스트 [Enzyme]

props가 적용된 화면 개발하기

App.js

import React, { Component } from 'react';
import { 
	StyleSheet, 
	View,
} from 'react-native';
import Props from './src/Props'

export default class App extends Component {

	render() {
		return (
			<View style={styles.container}>
				<Props data="props testing..." />
			</View>
		);
	}
}

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

 

src/Props.js

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

export default class Props extends Component {

    render() {
        return (
            <View>
                <Text style={{fontSize: 30}}>{ this.props.data }</Text>
            </View>
        );
    }
}

 

Build 하기

## emulator 실행
$ emulator -list-avds
$ emulator -avd Nexus_6_API_25

## react-native build
$ react-native run-android

 

300

props를 테스트 하기 위하여 enzyme-adapter-react-16 라이브러리를 이용합니다.

https://airbnb.io/enzyme/

 

Enzyme Adapter React 16 설치

- enzyme

- enzyme-adapter-react-16

- react-dom

3개의 플러그인을 설치합니다.

$ npm i --save-dev enzyme enzyme-adapter-react-16 react-dom

 

테스트 코드 작성하기

__test__/Props-test.js

import 'react-native';
import React from 'react';
import Props from '../src/Props';
import renderer from 'react-test-renderer';

import {configure, shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

it('props에 hello World가 나와야 한다.', () => {
    
    const wrapper = shallow(<Props data="Hello World" />).props()
    // console.warn(wrapper.children.props.children)

    expect(wrapper.children.props.children).toEqual('Hello World')
});

 

테스트 코드 실행

$ npm test Props-test.js

Test가 Pass 된 것을 확인 할 수 있습니다.