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

Warn if class has a render() method but doesn't extend React.Component #11168

Merged
merged 4 commits into from Oct 31, 2017
Merged

Warn if class has a render() method but doesn't extend React.Component #11168

merged 4 commits into from Oct 31, 2017

Conversation

@sw-yx
Copy link
Contributor

@sw-yx sw-yx commented Oct 10, 2017

Hi! adding the fix for #10103. test/prettier/lint/flow all done and passing. (replaces PR #11149)

@gaearon
Copy link
Member

@gaearon gaearon commented Oct 10, 2017

Prettier is failing. Have you run yarn before running prettier?

@sw-yx
Copy link
Contributor Author

@sw-yx sw-yx commented Oct 10, 2017

gosh really embarrassing. Looks like i didnt commit the prettified file. I have resubmitted and it should pass. Jeez I am going to be so embarrassed when I look back on this in a few months

Copy link
Member

@gaearon gaearon left a comment

See changes below + we'll need a test for this.

warning(
!(workInProgress.type.prototype &&
workInProgress.type.prototype.render),
'Warning: Using a class with a render method as a function, ' +

This comment has been minimized.

@gaearon

gaearon Oct 10, 2017
Member

Please remove Warning: , it gets added automatically.

@@ -481,6 +481,12 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
var value;

if (__DEV__) {
warning(
!(workInProgress.type.prototype &&

This comment has been minimized.

@gaearon

gaearon Oct 10, 2017
Member

This is a bit hard to follow. Let's just wrap it in an if block with the real condition, and then pass false to the warning call.

!(workInProgress.type.prototype &&
workInProgress.type.prototype.render),
'Warning: Using a class with a render method as a function, ' +
'did you forget to extend React.Component?',

This comment has been minimized.

@gaearon

gaearon Oct 10, 2017
Member

I would tweak the wording to:

The <%s /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change %s to extend React.Component instead.

You’ll need to pass the component name (use getComponentName).

@sw-yx
Copy link
Contributor Author

@sw-yx sw-yx commented Oct 10, 2017

thanks @gaearon . its not clear to me -where- to add the tests. is there a deeper test guide somewhere other than the 4 page Contributing docs?

  • closest i can find is ReactIncrementalSideEffects-test.js where you do test warnings but this issue we are testing has no side effects
  • I could also put it in ReactIncremental-test.js but it is not obvious to me where the natural home is because of lack of similar tests. Not sure if you guys care about the order of tests!!
  • ReactIncrementalErrorHandling-test.js seems to be for true error handling.
@sw-yx
Copy link
Contributor Author

@sw-yx sw-yx commented Oct 10, 2017

added the test in ReactIncremental-test.js - no idea if this is the right place since i couldnt find similar tests to colocate this with but i figure i should just post it up for your comment in case it is acceptable!

@gaearon
Copy link
Member

@gaearon gaearon commented Oct 11, 2017

Sorry the structure is a bit confusing. We haven’t updated the file structure to be sensible yet after deleting the old engine.

But I’d put it here.

@gaearon
Copy link
Member

@gaearon gaearon commented Oct 11, 2017

Also the test is failing:

Expected spy to have been called with:

"Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change ClassWithRenderNotExtended to extend React.Component instead." as argument 1,

but it was called with

"Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, but doesn't extend React.Component.This is likely to cause errors. Change ClassWithRenderNotExtended to extend React.Component instead.".

Have you tried running it with npm test -- <filename>?

@sw-yx
Copy link
Contributor Author

@sw-yx sw-yx commented Oct 11, 2017

seems i errantly deleted a space when I made the warning multiline. will fix and move as suggested.

Yeah is there a separate issue for restructuring the test file structure? "ReactIncremental" doesnt really seem to make sense anymore

@gaearon
Copy link
Member

@gaearon gaearon commented Oct 28, 2017

Sorry for the trouble again. We rearranged how files are laid out in the repo. Could you please reapply your changes on top of master?

merging in fb's changes
@sw-yx
Copy link
Contributor Author

@sw-yx sw-yx commented Oct 29, 2017

I confess I'm not sure what's going on. I thought I could simply git pull your changes from master and git merge it into my branch, however when the checks run (as they have here) there are -hundreds- of test failures presumably because the files have been moved around. I'm not sure why the tests are not updated in my branch. I'm going to try junking my branch and simply re-creating the branch fresh from your master

@sw-yx
Copy link
Contributor Author

@sw-yx sw-yx commented Oct 29, 2017

ok this one looks like it works. Woohoo!

try {
ReactDOM.render(<ClassWithRenderNotExtended />, container);
} catch (e) {
expect(e).toEqual(new TypeError('Cannot call a class as a function'));

This comment has been minimized.

@gaearon

gaearon Oct 31, 2017
Member

This only runs assertions if we get into catch. But what if we have a bug that causes us not to throw an error? Then the test doesn't assert anything.

gaearon added 2 commits Oct 31, 2017
@gaearon
Copy link
Member

@gaearon gaearon commented Oct 31, 2017

I made a few minor tweaks:

  • Made sure the test fails if we don't throw.
  • Simplified the condition that we check.

I think this is good to go. Thanks!

Ethan-Arrowood added a commit to Ethan-Arrowood/react that referenced this pull request Dec 8, 2017
facebook#11168)

Warn if class has a render() method but doesn't extend React.Component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants