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

Conversation

Projects
None yet
3 participants
@sw-yx
Contributor

sw-yx commented Oct 10, 2017

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

@gaearon

This comment has been minimized.

Member

gaearon commented Oct 10, 2017

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

@sw-yx

This comment has been minimized.

Contributor

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

@gaearon

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

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?

Merge pull request #1 from facebook/master
merging in fb's changes
@sw-yx

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

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 some commits Oct 31, 2017

@gaearon

This comment has been minimized.

Member

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

Warn if class has a render() method but doesn't extend React.Component (
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