Detox
Detox
Detox is a gray-box end-to-end testing framework specifically designed for React Native and mobile applications, allowing you to test complete user flows on real devices or simulators.
Installing Detox
bash
npm install detox --save-dev
npm install -g detox-cli
Configuring Detox
javascript
// .detoxrc.js
module.exports = {
testRunner: 'jest',
apps: {
ios: { type: 'ios.app', binaryPath: 'ios/build/MyApp.app' },
android: { type: 'android.apk', binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk' },
},
};
Writing a Basic Detox Test
javascript
describe('Login Flow', () => {
it('should login successfully', async () => {
await element(by.id('email-input')).typeText('test@example.com');
await element(by.id('password-input')).typeText('password123');
await element(by.id('login-button')).tap();
await expect(element(by.text('Welcome'))).toBeVisible();
});
});
Running Detox Tests
bash
detox build -c ios.sim.debug
detox test -c ios.sim.debug
Why Detox is a "Gray Box" Framework
Unlike fully black-box end-to-end tools, Detox has some awareness of your app’s internal state, allowing it to intelligently wait for asynchronous operations to complete rather than relying on arbitrary fixed delays.
Testing Navigation Flows
javascript
await element(by.id('product-card-1')).tap();
await expect(element(by.text('Product Details'))).toBeVisible();
Conclusion
Detox enables reliable, realistic end-to-end testing of complete user flows in React Native applications, running on actual simulators or devices to catch integration issues unit tests alone cannot detect.
