[Fiber] Make bad element type message same as in Stack (#8460)
* Make bad element type message same as in Stack This makes Fiber emit the same message as Stack (aside from the missing owner information). * Add a separate test verifying error includes owner name Fiber currently doesn't pass it. This is just to keep track of it as a todo.
Dan Abramov committed
Nov 30, 2016 at 16:29 UTC
623f608aab7f43a51d33b19103ec53f2bb6ef449
4 files changed
+29
-2
scripts/fiber/tests-failing.txt
+1
-1
@@ -83,7 +83,7 @@ src/renderers/shared/hooks/__tests__/ReactHostOperationHistoryHook-test.js
83
84
src/renderers/shared/shared/__tests__/ReactComponent-test.js
85
* should throw on invalid render targets
86
-* throws usefully when rendering badly-typed elements
86
+* includes owner name in the error about badly-typed elements
87
88
src/renderers/shared/shared/__tests__/ReactComponentLifeCycle-test.js
89
* should carry through each of the phases of setup
scripts/fiber/tests-passing.txt
+1
@@ -1221,6 +1221,7 @@ src/renderers/shared/shared/__tests__/ReactComponent-test.js
1221
* should support new-style refs with mixed-up owners
1222
* should call refs at the correct time
1223
* fires the callback after a component is rendered
1224
+* throws usefully when rendering badly-typed elements
1225
1226
src/renderers/shared/shared/__tests__/ReactComponentLifeCycle-test.js
1227
* should not reuse an instance when it has been unmounted
src/renderers/shared/fiber/ReactFiber.js
+9
-1
@@ -41,6 +41,8 @@ var {
41
NoEffect,
42
} = require('ReactTypeOfSideEffect');
43
44
+var invariant = require('invariant');
45
+
46
// A Fiber is work on a Component that needs to be done or was done. There can
47
// be more than one per component.
48
export type Fiber = {
@@ -315,7 +317,13 @@ function createFiberFromElementType(type : mixed, key : null | string) : Fiber {
317
// There is probably a clever way to restructure this.
318
fiber = ((type : any) : Fiber);
319
} else {
318
- throw new Error('Unknown component type: ' + typeof type);
320
+ invariant(
321
+ false,
322
+ 'Element type is invalid: expected a string (for built-in components) ' +
323
+ 'or a class/function (for composite components) but got: %s.',
324
+ type == null ? type : typeof type,
325
+ // TODO: Stack also includes owner name in the message.
326
+ );
327
}
328
return fiber;
329
}
src/renderers/shared/shared/__tests__/ReactComponent-test.js
+18
@@ -347,4 +347,22 @@ describe('ReactComponent', () => {
347
expectDev(console.error.calls.count()).toBe(2);
348
});
349
350
+ it('includes owner name in the error about badly-typed elements', () => {
351
+ spyOn(console, 'error');
352
+
353
+ function Foo() {
354
+ var X = undefined;
355
+ return <X />;
356
+ }
357
+
358
+ expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toThrowError(
359
+ 'Element type is invalid: expected a string (for built-in components) ' +
360
+ 'or a class/function (for composite components) but got: undefined. ' +
361
+ 'Check the render method of `Foo`.'
362
+ );
363
+
364
+ // One warning for each element creation
365
+ expectDev(console.error.calls.count()).toBe(1);
366
+ });
367
+
368
});