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

Stateless functional components have "this" defined #1683

Closed
halkeye opened this issue Jun 19, 2018 · 4 comments
Closed

Stateless functional components have "this" defined #1683

halkeye opened this issue Jun 19, 2018 · 4 comments

Comments

@halkeye
Copy link

halkeye commented Jun 19, 2018

Describe the bug
Looks like stateless functional components work differently in browser vs enzyme.
I'm not sure if this is a enzyme, react, react-test-utils or babel issue.

To Reproduce

Run this jest test

const React = require('react');
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
const { shallow } = require('enzyme');

// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });

const ArrowComponent = () => {
  console.log(this.props);
  return <div />;
};

// shouldn't work either
function FuncComponent () {
  console.log(this.props);
  return <div />;
}

test('FuncComponent', () => {
  shallow(<FuncComponent abc="123" />);
});

test('ArrowComponent', () => {
  shallow(<ArrowComponent abc="123" />);
});

Expected behavior
Both tests should fail (not sure how to properly write that, maybe expect throws?) but only the arrow function has this as undefined.

Module Versions:

├── enzyme@3.3.0
└── enzyme-adapter-react-16@1.1.1
└── react@16.4.1

Node Verison: v8.11.3

LSB Version: :core-4.1-amd64:core-4.1-noarch
Distributor ID: CentOS
Description: CentOS Linux release 7.5.1804 (Core)
Release: 7.5.1804
Codename: Core

@halkeye
Copy link
Author

halkeye commented Jun 19, 2018

It might just be "This is how javascript works" with functions and this, but it was a shock to me because we refactored a few classes into stateless functions and had one break because we missed the this.props but the tests were still passing.

Functional components shouldn't have this.props defined, so i think its enzyme's shallow stuff.
FuncComponent is outputting { abc: '123' } which seems absolutely wrong.

@ljharb
Copy link
Member

ljharb commented Jul 2, 2018

Hmm, that does seem like an issue - this should not work in SFCs.

@ljharb
Copy link
Member

ljharb commented Jul 3, 2018

This is a bug in react-test-renderer; I've filed it there. facebook/react#13141

@ljharb
Copy link
Member

ljharb commented Jul 3, 2018

ok, confirmed it's only a bug in shallow, and only in react 16.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
React 16
  
Bugs
Development

No branches or pull requests

2 participants