Detox, Enzyme, Jest Setup in React Native

Installation

Install something required by detox:

$ xcode-select --install
$ brew tap wix/brew
$ brew install applesimutils
$ npm install -g detox-cli
npm install detox --save-dev --no-package-lock
npm install jest jest-circus --save-dev --no-package-lock
detox init -r jest

Configuration

(For simulator release) In your .detoxrc.json file:

{
"testRunner": "jest",
"runnerConfig": "e2e/config.json",
"configurations": {
"ios.sim.release": {
"type": "ios.simulator",
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/example.app",
"build": "...",
"device": {
"type": "iPhone 11 Pro"
}
}
}
}
{
"testRunner": "jest",
"runnerConfig": "e2e/config.json",
"configurations": {
"ios.sim.debug": {
"type": "ios.simulator",
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
"build": "...",
"device": {
"type": "iPhone 11 Pro"
}
}
}
}
detox build
detox test

API

Refresh the app. Hot reload.

describe('Example', () => {
beforeEach(async () => {
await device.reloadReactNative();
});
});

Visible or not. Get document by id and value.

A sample component.

<Text testID={'textID'}>Hello World</Text>
it('should have welcome screen', async () => {
await expect(element(by.id('textID'))).toBeVisible();
});
it('should have welcome screen', async () => {
await expect(element(by.text('Hello World'))).toBeVisible();
});

Event Handlers

onTap:

await element(by.id('hello_button')).tap();

Enzyme

Used for shallow, full and static component rendering.

npm i --save-dev enzyme enzyme-adapter-react-16
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import LocalComponent from './LocalComponent';
configure({ adapter: new Adapter() });const defaultProps = { itemObjects: [{ title: "something", item: [1, 2, 3] }, { title: "something", item: [1, 2, 3] }] };const setup = (props = {}) => {
const setupProps = { ...defaultProps, ...props };
return shallow(<LocalComponent {...setupProps} />)
}
const findByTestIDAttribute = (wrapper, val) => {
return wrapper.find(`[testID="${val}"]`);
}
describe('Component testing', () => {
it('renders with default props', () => {
const wrapper = setup();
const component = findByTestIDAttribute(wrapper, 'component-nothing-title');
expect(component.exists()).toBe(false);
});
});
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers';
import { middlewares } from '../configureStore';
export const storeFactory = (initialState) => { const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);

return createStoreWithMiddleware(rootReducer, initialState);
}
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import rootReducer from './reducers';
export const middlewares = [ReduxThunk];const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore); export default createStoreWithMiddleware(rootReducer);

Written by

Don’t follow me. I wrote junks here. Follow me on Twitter instead.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store