Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch Stateless function cannot be given refs when run unit test #16247

Closed
kubens opened this issue Oct 8, 2017 · 10 comments
Closed

Switch Stateless function cannot be given refs when run unit test #16247

kubens opened this issue Oct 8, 2017 · 10 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@kubens
Copy link

kubens commented Oct 8, 2017

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"
	}
}
@8of
Copy link

8of commented Oct 9, 2017

How do you run the test?
What's in the package.json file?

@kubens
Copy link
Author

kubens commented Oct 9, 2017

I run test by yarn test. package.json added to first post

@sam-vdp
Copy link
Contributor

sam-vdp commented Nov 2, 2017

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

@djalmaaraujo
Copy link

Happening with me.

@idrakimuhamad
Copy link

Bump to this too today when running Jest

@stale
Copy link

stale bot commented Jan 8, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 8, 2018
@djalmaaraujo
Copy link

According to last messages there are useful info. Why closing?

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 8, 2018
@tinaboyce
Copy link

Bump just to inform I have encountered it today.

@stale
Copy link

stale bot commented May 16, 2018

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label May 16, 2018
@react-native-bot
Copy link
Collaborator

It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label May 16, 2018
@hramos hramos closed this as completed Jul 18, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Jul 18, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

8 participants