Switch Stateless function cannot be given refs when run unit test

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13 Node: 8.6.0 Yarn: 1.1.0 npm: 5.3.0 Watchman: 4.9.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: Not Found

Packages: (wanted => installed) react: 16.0.0-beta.5 => 16.0.0-beta.5 react-native: 0.49.1 => 0.49.1

Target Platform: iOS (11)

Steps to Reproduce

1. react-native init
2. Add Switch component to App.js
3. Run unit test

Expected Behavior

Should run unit test without console.error

Actual Behavior

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

    Check the render method of `Switch`.
        in Unknown (created by Switch)
        in Switch (created by App)
        in View (created by View)
        in View (created by App)
        in App

Reproducible Demo

App.js file

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { View, Switch } from 'react-native';


export default class App extends Component<{}> {
  render() {
    return (
      <View>
        <Switch />
      </View>
    );
  }
}

__tests__/App.test.js file

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <App />
  );
});

package.json file

{
	"name": "test",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0-beta.5",
		"react-native": "0.49.2"
	},
	"devDependencies": {
		"babel-jest": "21.2.0",
		"babel-preset-react-native": "4.0.0",
		"jest": "21.2.1",
		"react-test-renderer": "16.0.0-beta.5"
	},
	"jest": {
		"preset": "react-native"
	}
}

[sam-vdp]

Some more detail: The issue is caused by the native RCTSwitch component used by Switch.render:

return (
  <RCTSwitch
    {...props}
    ref={(ref) => { this._rctSwitch = ref; }}
    onChange={this._onChange}
  />
);

As you can see this component is assigned a ref. However, react-test-renderer uses the following code to check if a component is stateless:

if (typeof value === 'object' && value !== null && typeof value.render === 'function') {
  // Proceed under the assumption that this is a class instance

Because RCTSwitch doesn’t have a render method, the warning is raised.

See also: https://stackoverflow.com/questions/47058905/using-react-test-renderer-with-switch-causes-stateless-function-components-ca

[tinaboyce]

Bump just to inform I have encountered it today.