React Native Unit Testing

Button.js

import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import styles from './button.style';
import StyleConstants from '@common/StyleConstants';
import * as Progress from 'react-native-progress';
import PropTypes from 'prop-types';

export default class Button extends React.Component {
    static defaultProps = {
        isRound: true,
        backgroundColor: StyleConstants.Color.Black,
        color: StyleConstants.Color.Light,
        disabled: false,
        isInProgress: false
    }

    static propTypes = {
        isRound: PropTypes.bool,
        disabled: PropTypes.bool,
        isInProgress: PropTypes.bool,
        backgroundColor: PropTypes.string,
        color: PropTypes.string,
        onPress: PropTypes.func,
        text: PropTypes.string.isRequired
    }

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <TouchableOpacity
                activeOpacity={this.props.disabled || this.props.isInProgress
                ? 1
                : 0.7}
                style={[
                styles.button, this.getButtonStyle()
            ]}
                onPress={this.props.onPress}>
                {this.renderProgressBar()}
                {this.renderButtonText()}
            </TouchableOpacity>
        )
    }

    /**
     * Create button styles based on the props passed from parent
     */
    getButtonStyle() {
        let style = {};

        if (this.props.isRound) {
            style.borderRadius = 20;
        }
        style.backgroundColor = this.props.backgroundColor;

        return style;
    }

    /**
     * Render and return the progress bar if only if is true
     */
    renderProgressBar() {
        if (this.props.isInProgress) {
            return (
                <View>
                    <Progress.Circle
                        style={styles.progressbar}
                        borderColor={StyleConstants.Color.Light}
                        size={15}
                        indeterminate={true}/>
                </View>
            )
        } else {
            return null;
        }
    }

    renderButtonText() {
        if (!this.props.isInProgress) {
            return (
                <Text style={[styles.text, this.props.color]}>{this.props.text}</Text>
            );
        }

        return null;
    }
}

Button.spec.js

'strict_mode';

import {Text, View, TouchableOpacity} from 'react-native';
import React from 'react';
import Button from '../Button';
import * as _ from 'lodash';
import * as Progress from 'react-native-progress';
import * as sinon from 'sinon';
const ReactTestRenderer = require('react-test-renderer');

describe('Button Component', () => {
    let buttonComponent;
    let buttonComponentInstance;
    sinon.stub(Progress.Circle.prototype, 'render').callsFake(()=>{
        return <View>Progress Bar</View>;
    });

    beforeEach(() => {
        buttonComponent = ReactTestRenderer.create(<Button
            isRound={true}
            disabled={false}
            isInProgress={true}
            backgroundColor='#fff'
            color='#000'
            onPress=
            {()=>{console.log('this is test button!')}}
            text='Submit'
            isRound={true}/>);

        buttonComponentInstance = buttonComponent.getInstance();
    });

    describe('Rendering', () => {
        it('should create the Button component', () => {
            expect(buttonComponent.toJSON()).toMatchSnapshot();
        });

        it('should pass the button text as Submit', () => {
            expect(buttonComponentInstance.props.text).toBe('Submit');
        });

        it('should not render in progress component', () => {
            let result = _.filter(buttonComponent.toJSON().children, res => res.type == 'Progress.Circle');
            expect(result.length).toBe(0);
        });
    });

    describe('getButtonStyle', () => {
        it('should return backgroundColor and borderRadius', () => {
            const styles = buttonComponentInstance.getButtonStyle();
            expect(styles.hasOwnProperty('backgroundColor')).toBeTruthy();
            expect(styles.hasOwnProperty('borderRadius')).toBeTruthy();
        });
    });

});

npm-install

yarn add jest-expo --dev or npm i jest-expo --save-dev
npm install sinon --save-dev
npm install lodash --save-dev
npm install react-dom --save-dev
npm install react-test-renderer --save-dev

npm-install-setup

npm install babel-jest --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev

package.json

[
  ...
  "jest": {
    "preset": "jest-expo",
    "collectCoverageFrom": [
      "(/__tests__/.*|(\\.|/)(test|spec))\\.js?$",
      "!**/node_modules/**"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/setup.js"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ]
  },
....
]

setup.js

 module.exports = require('babel-jest').createTransformer({
    presets: [
        "es2015",
        "react-native-stage-0"
    ]
});