tests.md

id	title	sidebar_label
tests	Testing	Testing

Jest

To test a component which use RNCamera, you need to create a react-native-camera-mlkit.js file inside your mocks folder on the root of your project with the following content:

import React from 'react';

const timeout = ms => new Promise(resolve => setTimeout(resolve, ms));

export class RNCamera extends React.Component {
  static Constants = {
    Aspect: {},
    BarCodeType: {},
    Type: { back: 'back', front: 'front' },
    CaptureMode: {},
    CaptureTarget: {},
    CaptureQuality: {},
    Orientation: {},
    FlashMode: {},
    TorchMode: {},
  };

  takePictureAsync = async () => {
    await timeout(2000);
    return {
      base64: 'base64string',
    };
  };

  render() {
    return null;
  }
}

export default RNCamera;

You don't need to do anything else in your test, because Jest will use the mock in your test instead of the native module.

Example

We are going to create a component which uses RNCamera which two simple features:

• Take a photo
• Change camera between front or back

The custom component PhotoCamera is the following:

import React from 'react';
import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { RNCamera } from 'react-native-camera-mlkit';
import Icon from 'react-native-vector-icons/FontAwesome';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  topButtons: {
    flex: 1,
    width: Dimensions.get('window').width,
    alignItems: 'flex-start',
  },
  bottomButtons: {
    flex: 1,
    width: Dimensions.get('window').width,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },

  flipButton: {
    flex: 1,
    marginTop: 20,
    right: 20,
    alignSelf: 'flex-end',
  },
  recordingButton: {
    marginBottom: 10,
  },
});

class PhotoCamera extends React.PureComponent {
  state = {
    type: RNCamera.Constants.Type.back,
  };

  flipCamera = () =>
    this.setState({
      type:
        this.state.type === RNCamera.Constants.Type.back
          ? RNCamera.Constants.Type.front
          : RNCamera.Constants.Type.back,
    });

  takePhoto = async () => {
    const { onTakePhoto } = this.props;
    const options = {
      quality: 0.5,
      base64: true,
      width: 300,
      height: 300,
    };
    const data = await this.camera.takePictureAsync(options);
    onTakePhoto(data.base64);
  };
  render() {
    const { type } = this.state;
    return (
      <View style={styles.container}>
        <RNCamera
          ref={cam => {
            this.camera = cam;
          }}
          type={type}
          style={styles.preview}
        />
        <View style={styles.topButtons}>
          <TouchableOpacity onPress={this.flipCamera} style={styles.flipButton}>
            <Icon name="refresh" size={35} color="orange" />
          </TouchableOpacity>
        </View>
        <View style={styles.bottomButtons}>
          <TouchableOpacity onPress={this.takePhoto} style={styles.recordingButton}>
            <Icon name="camera" size={50} color="orange" />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default PhotoCamera;

And here is our test to check if it renders properly:

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure } from 'enzyme';
import MyPhotoCamera from './';

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

describe('PhotoCamera Tests', () => {
  test('renders correctly', () => {
    const wrapper = shallow(<MyPhotoCamera />);
    expect(wrapper).toMatchSnapshot();
  });
});

Also, here is the complete test of the whole component with 100% coverage:

import React from 'react';
import { TouchableOpacity } from 'react-native';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure, mount } from 'enzyme';
import PhotoCamera from '../';

const { JSDOM } = require('jsdom');

const jsdom = new JSDOM();
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .map(prop => Object.getOwnPropertyDescriptor(src, prop));
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

// Ignore React Web errors when using React Native
// but still show relevant errors
const suppressedErrors = /(React does not recognize the.*prop on a DOM element|Unknown event handler property|is using uppercase HTML|Received `true` for a non-boolean attribute `accessible`|The tag.*is unrecognized in this browser)|is using incorrect casing|Received `true` for a non-boolean attribute `enabled`/;
const realConsoleError = console.error; // eslint-disable-line
// eslint-disable-next-line
console.error = message => {
  if (message.match(suppressedErrors)) {
    return;
  }
  realConsoleError(message);
};

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

describe('PhotoCamera Tests', () => {
  test('renders correctly', () => {
    const wrapper = shallow(<PhotoCamera />);
    expect(wrapper).toMatchSnapshot();
  });
  test('initial state should be back camera', () => {
    const wrapper = shallow(<PhotoCamera />);
    expect(wrapper.state().type).toBe('back');
  });
  test('should flip the camera from back to front', () => {
    const wrapper = shallow(<PhotoCamera />);
    expect(wrapper.state().type).toBe('back');
    wrapper
      .find(TouchableOpacity)
      .first()
      .props()
      .onPress();
    expect(wrapper.state().type).toBe('front');
  });

  test('should flip the camera from front to back if touch flip button and curren state is ', () => {
    const wrapper = shallow(<PhotoCamera />);
    wrapper.setState({
      type: 'front',
    });
    wrapper.update();
    wrapper
      .find(TouchableOpacity)
      .first()
      .props()
      .onPress();
    expect(wrapper.state().type).toBe('back');
  });

  test('should have a reference to the React Native Camera module', () => {
    const wrapper = mount(<PhotoCamera />);
    expect(wrapper.instance().camera).toBeDefined();
  });

  test('test onPress functionality', async () => {
    const onTakePhotoEvent = jest.fn(data => data);
    const wrapper = mount(<PhotoCamera onTakePhoto={onTakePhotoEvent} />);
    await wrapper
      .find(TouchableOpacity)
      .at(1)
      .props()
      .onPress();
    expect(onTakePhotoEvent.mock.calls.length).toBe(1);
  });
});