The test suite contains the snapshot test, the actions test,reducers test and finally performs async test.

//__test__/pass.js import ‘react-native’;

import React, {Component} from ‘react’;

import renderer from ‘react-test-renderer’; import * as types from ‘../actions/types’;

import * as pass from ‘../actions/pass’;

import passReducer from ‘../reducers/pass’;

import store from ‘../store’; import Pass from ‘../components/pass’; jest.mock(‘../__mocks__/request’); jest.mock(‘TouchableNativeFeedback’, ()=> {

const RealComponent = require.requireActual(‘TouchableNativeFeedback’);

RealComponent.SelectableBackground = () => { //Noob }

return RealComponent;

}); describe(‘Component’, ()=> {

it(‘Should Render’, ()=> {

const tree = renderer.create(

<Pass store={store} />

).toJSON();

});

}); describe(‘Actions’, () => {



it(‘Should Add Key’, ()=> {

const key = “1”;

const expectedAction = {

type: types.ADD_KEY,

key

}; expect(pass.addKey(key)).toEqual(expectedAction);

}); it(‘Should Remove Key’, ()=> {

const expectedAction = {

type: types.DELETE_KEY

}; expect(pass.deleteKey()).toEqual(expectedAction);

}); it(‘Should Clear Key’, ()=> {

const expectedAction = {

type: types.CLEAR_KEYS

}; expect(pass.clearKeys()).toEqual(expectedAction);

}); it(‘Should Submit Keys’, ()=> {

expect(pass.submitKeys()).toBeTruthy();

}); }); describe(‘Reducers’, ()=> { let state = {

pass: “”

}; it(‘Should be initialState’, ()=> {

let reducer = passReducer(undefined, {});

expect(reducer).toEqual(state);

}); it(‘Should Keep Track Of Keys’, ()=> {

state = passReducer(state, pass.addKey("1"));

expect(state.pass).toEqual(“1”); state = passReducer(state, pass.addKey("2"));

expect(state.pass).toEqual(“12”); state = passReducer(state, pass.addKey("3"));

expect(state.pass).toEqual(“123”); state = passReducer(state, pass.addKey("4"));

expect(state.pass).toEqual(“1234”) state = passReducer(state, pass.deleteKey());

expect(state.pass).toEqual(“123”);

}); it(‘Should Submit Keys’, () => {

store.dispatch(pass.submitKeys(state.pass)).then((res)=> {

expect(res).toEqual(“success”);

});

});

});

I know the above code block looks a bit cumbersome, but pay close attention to the different sections. Aside from importing the necessary modules for testing, we also imported our redux files and the component.

... import * as types from ‘../shared/actions/types’;

import * as pass from ‘../shared/actions/pass’;

import passReducer from ‘../shared/reducers/pass’;

import store from ‘../shared/store’; import Pass from ‘../components/pass’; ....

jest.mock() allows the smooth running of the test by providing fake versions of modules the component is dependent on.

For instance in the code below .SelectableBackground() would break the test if we don’t mock it.

... <TouchableNativeFeedback

...

background={

TouchableNativeFeedback.SelectableBackground()

}>

...

</TouchableNativeFeedback> ...

Furthermore, unlike the request mock function, modifying the actual TouchableNativeFeedback is all we have to do.

jest.mock(‘TouchableNativeFeedback’, ()=> {

const RealComponent = require.

requireActual(‘TouchableNativeFeedback’); //Modify real component with noob

RealComponent.SelectableBackground = () => { //Noob }

return RealComponent;

});

There three describe blocks in the test suite, the first is a snapshot test to ensure the component is rendered properly. The second involves testing all the actions by passing in data and ensuring that we get the right feedback.

... it(‘Should Add Key’, ()=> {

const key = “1”;

const expectedAction = {

type: types.ADD_KEY,

key

}; expect(pass.addKey(key)).toEqual(expectedAction);

}); ...

The third describe block contains the test for the reducers. By calling the passReducer(…) function we can keep track of the keys punched in.

... let state = {

pass: “”

}; ... state = passReducer(state, pass.addKey("1"));

expect(state.pass).toEqual(“1”); ...

Finally, because the request module had been mocked we can ensure that we get the right message from the server.