How to set up react-native integration test

Question

In react-native doc, it says to check UIExploreIntegrationTest. It seems that it requires some setup on Xcode as it uses Objective C code(*.m). I'm new on Obj-C test.. May I know how to set up the integration test on Xcode?

Answer 1

With some guesswork I was able to nail down a few steps to get integration tests running on iOS. However I'm still figuring out how to get Android integration tests working.

Go ahead and copy IntegrationTests.js from the RN github and make a new JS file called Tests.js

Place both of these files in the root of your project. Then change IntegrationTests.js by going down and changing all of their requires to just one require statement for the file you just created require('./Tests')

Here is a basic implementation of what your Tests.js file should look like:

'use strict';

var React = require('react');
var ReactNative = require('react-native');

var {
  Text,
  View,
} = ReactNative;
var { TestModule } = ReactNative.NativeModules;

var Tests = React.createClass({
  shouldResolve: false,
  shouldReject: false,
  propTypes: {
    RunSampleCall: React.PropTypes.bool
  },
  getInitialState() {
    return {
      done: false,
    };
  },
  componentDidMount() {
    if(this.props.TestName === "SomeTest"){
      Promise.all([this.SomeTest()]).then(()=>
      {
        TestModule.markTestPassed(this.shouldResolve);
      });
      return;
    }
  },
  async SomeTest(){
    var one = 1;
    var two = 2;
    var three = one + two;
    if(three === 3){
      this.shouldResolve = true;
    }else{
      this.shouldResolve = false;
    }
  }
  render() : ReactElement<any> {
    return <View />;
  }
});

Tests.displayName = 'Tests';

module.exports = Tests;

Here is a basic implementation of your Tests.m file (inside xcode)

#import <UIKit/UIKit.h>
#import <XCTest/XCTest.h>

#import <RCTTest/RCTTestRunner.h>
#import "RCTAssert.h"

#define RCT_TEST(name)                  \
- (void)test##name                      \
{                                       \
[_runner runTest:_cmd module:@#name]; \
}

@interface IntegrationTests : XCTestCase

@end

@implementation IntegrationTests
{
  RCTTestRunner *_runner;
}

- (void)setUp
{
  _runner = RCTInitRunnerForApp(@"IntegrationTests", nil);
}

- (void)test_SomeTest
{
  [_runner runTest:_cmd
            module:@"Tests"
      initialProps:@{@"TestName": @"SomeTest"}
configurationBlock:nil];
}

@end

Also you need to add RCTTest from node_modules/react-native/Libraries/RCTTest/RCTTest.xcodeproj to your libraries. then you need to drag the product libRCTTest.a of that project you added to Linked Frameworks and Libraries for your main target in the general tab.

^^ that path might be slightly incorrect

Then you need to edit your scheme and set an environment variable CI_USE_PACKAGER to 1

So if you do all those steps you should have a simple test run and pass. It should be fairly easy to expand after that. Sorry if my answer is slightly sloppy, let me know if you have any questions.