[React Native] Jest - Element 정의 테스트

화면에 Element가 있는지 없는지를 테스트 합니다.

 

화면 코딩

/src/Element.js

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

export default class Element extends Component {
    render() {
        return (
            <View>
                <TextInput
                    testId={'username'}
                    style={{backgroundColor: 'gray', width: 200}}
                />
            </View>
        );
    }
}

 

Test Code 작성하기

/__test__/Function-test.js

import 'react-native';
import React from 'react';
import Element from '../src/Element';

import renderer from 'react-test-renderer';

// element를 반환한다.
let findElemnt = (tree, element) => {
    // console.warn(tree.children)
    for (node in tree.children) {
        if (tree.children[node].props.testId == element) {
            return true
        }
    }
    return false
}

it('username TextInput이 있어야 한다.', () => {
	const elementData = renderer.create(
		<Element />
	).toJSON()

	expect(findElemnt(elementData, 'username')).toBeDefined()
});

 

Test Code 실행

$ npm test Element-test.js

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