Skip to content

Commit 5bf8290

Browse files
uhyouhyo
committed
add new test for JSX component return type error
1 parent 2217319 commit 5bf8290

File tree

5 files changed

+339
-0
lines changed

5 files changed

+339
-0
lines changed

‎tests/baselines/reference/jsxComponentTypeErrors.errors.txt

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
tests/cases/compiler/jsxComponentTypeErrors.tsx(20,16): error TS2774: This expression cannot be used as a JSX component.
2+
Its return type '{ type: string; }' is not a valid JSX element.
3+
Types of property 'type' are incompatible.
4+
Type 'string' is not assignable to type '"element"'.
5+
tests/cases/compiler/jsxComponentTypeErrors.tsx(21,16): error TS2774: This expression cannot be used as a JSX component.
6+
Its instance type 'ClassComponent' is not a valid JSX element.
7+
Types of property 'type' are incompatible.
8+
Type 'string' is not assignable to type '"element-class"'.
9+
tests/cases/compiler/jsxComponentTypeErrors.tsx(22,16): error TS2774: This expression cannot be used as a JSX component.
10+
Its element type 'ClassComponent' is not a valid JSX element.
11+
Type 'ClassComponent' is not assignable to type 'ElementClass'.
12+
tests/cases/compiler/jsxComponentTypeErrors.tsx(31,16): error TS2774: This expression cannot be used as a JSX component.
13+
Its return type '{}' is not a valid JSX element.
14+
Property 'type' is missing in type '{}' but required in type 'Element'.
15+
tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: This expression cannot be used as a JSX component.
16+
Its instance type 'MemberClassComponent' is not a valid JSX element.
17+
Property 'type' is missing in type 'MemberClassComponent' but required in type 'ElementClass'.
18+
19+
20+
==== tests/cases/compiler/jsxComponentTypeErrors.tsx (5 errors) ====
21+
namespace JSX {
22+
export interface Element {
23+
type: 'element';
24+
}
25+
export interface ElementClass {
26+
type: 'element-class';
27+
}
28+
}
29+
30+
const FunctionComponent = () => ({
31+
type: 'string',
32+
});
33+
34+
class ClassComponent {
35+
type = 'string';
36+
}
37+
38+
const MixedComponent = Math.random() ? FunctionComponent : ClassComponent;
39+
40+
const elem1 = <FunctionComponent />;
41+
~~~~~~~~~~~~~~~~~
42+
!!! error TS2774: This expression cannot be used as a JSX component.
43+
!!! error TS2774: Its return type '{ type: string; }' is not a valid JSX element.
44+
!!! error TS2774: Types of property 'type' are incompatible.
45+
!!! error TS2774: Type 'string' is not assignable to type '"element"'.
46+
const elem2 = <ClassComponent />;
47+
~~~~~~~~~~~~~~
48+
!!! error TS2774: This expression cannot be used as a JSX component.
49+
!!! error TS2774: Its instance type 'ClassComponent' is not a valid JSX element.
50+
!!! error TS2774: Types of property 'type' are incompatible.
51+
!!! error TS2774: Type 'string' is not assignable to type '"element-class"'.
52+
const elem3 = <MixedComponent />;
53+
~~~~~~~~~~~~~~
54+
!!! error TS2774: This expression cannot be used as a JSX component.
55+
!!! error TS2774: Its element type 'ClassComponent' is not a valid JSX element.
56+
!!! error TS2774: Type 'ClassComponent' is not assignable to type 'ElementClass'.
57+
58+
const obj = {
59+
MemberFunctionComponent() {
60+
return {};
61+
},
62+
MemberClassComponent: class {},
63+
};
64+
65+
const elem4 = <obj.MemberFunctionComponent />;
66+
~~~~~~~~~~~~~~~~~~~~~~~~~~~
67+
!!! error TS2774: This expression cannot be used as a JSX component.
68+
!!! error TS2774: Its return type '{}' is not a valid JSX element.
69+
!!! error TS2774: Property 'type' is missing in type '{}' but required in type 'Element'.
70+
!!! related TS2728 tests/cases/compiler/jsxComponentTypeErrors.tsx:3:5: 'type' is declared here.
71+
const elem5 = <obj.MemberClassComponent />;
72+
~~~~~~~~~~~~~~~~~~~~~~~~
73+
!!! error TS2774: This expression cannot be used as a JSX component.
74+
!!! error TS2774: Its instance type 'MemberClassComponent' is not a valid JSX element.
75+
!!! error TS2774: Property 'type' is missing in type 'MemberClassComponent' but required in type 'ElementClass'.
76+
!!! related TS2728 tests/cases/compiler/jsxComponentTypeErrors.tsx:6:5: 'type' is declared here.
77+

‎tests/baselines/reference/jsxComponentTypeErrors.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
//// [jsxComponentTypeErrors.tsx]
2+
namespace JSX {
3+
export interface Element {
4+
type: 'element';
5+
}
6+
export interface ElementClass {
7+
type: 'element-class';
8+
}
9+
}
10+
11+
const FunctionComponent = () => ({
12+
type: 'string',
13+
});
14+
15+
class ClassComponent {
16+
type = 'string';
17+
}
18+
19+
const MixedComponent = Math.random() ? FunctionComponent : ClassComponent;
20+
21+
const elem1 = <FunctionComponent />;
22+
const elem2 = <ClassComponent />;
23+
const elem3 = <MixedComponent />;
24+
25+
const obj = {
26+
MemberFunctionComponent() {
27+
return {};
28+
},
29+
MemberClassComponent: class {},
30+
};
31+
32+
const elem4 = <obj.MemberFunctionComponent />;
33+
const elem5 = <obj.MemberClassComponent />;
34+
35+
36+
//// [jsxComponentTypeErrors.jsx]
37+
"use strict";
38+
var FunctionComponent = function () { return ({
39+
type: 'string'
40+
}); };
41+
var ClassComponent = /** @class */ (function () {
42+
function ClassComponent() {
43+
this.type = 'string';
44+
}
45+
return ClassComponent;
46+
}());
47+
var MixedComponent = Math.random() ? FunctionComponent : ClassComponent;
48+
var elem1 = <FunctionComponent />;
49+
var elem2 = <ClassComponent />;
50+
var elem3 = <MixedComponent />;
51+
var obj = {
52+
MemberFunctionComponent: function () {
53+
return {};
54+
},
55+
MemberClassComponent: /** @class */ (function () {
56+
function MemberClassComponent() {
57+
}
58+
return MemberClassComponent;
59+
}())
60+
};
61+
var elem4 = <obj.MemberFunctionComponent />;
62+
var elem5 = <obj.MemberClassComponent />;

‎tests/baselines/reference/jsxComponentTypeErrors.symbols

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
=== tests/cases/compiler/jsxComponentTypeErrors.tsx ===
2+
namespace JSX {
3+
>JSX : Symbol(JSX, Decl(jsxComponentTypeErrors.tsx, 0, 0))
4+
5+
export interface Element {
6+
>Element : Symbol(Element, Decl(jsxComponentTypeErrors.tsx, 0, 15))
7+
8+
type: 'element';
9+
>type : Symbol(Element.type, Decl(jsxComponentTypeErrors.tsx, 1, 28))
10+
}
11+
export interface ElementClass {
12+
>ElementClass : Symbol(ElementClass, Decl(jsxComponentTypeErrors.tsx, 3, 3))
13+
14+
type: 'element-class';
15+
>type : Symbol(ElementClass.type, Decl(jsxComponentTypeErrors.tsx, 4, 33))
16+
}
17+
}
18+
19+
const FunctionComponent = () => ({
20+
>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5))
21+
22+
type: 'string',
23+
>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 9, 34))
24+
25+
});
26+
27+
class ClassComponent {
28+
>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3))
29+
30+
type = 'string';
31+
>type : Symbol(ClassComponent.type, Decl(jsxComponentTypeErrors.tsx, 13, 22))
32+
}
33+
34+
const MixedComponent = Math.random() ? FunctionComponent : ClassComponent;
35+
>MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 17, 5))
36+
>Math.random : Symbol(Math.random, Decl(lib.es5.d.ts, --, --))
37+
>Math : Symbol(Math, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --))
38+
>random : Symbol(Math.random, Decl(lib.es5.d.ts, --, --))
39+
>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5))
40+
>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3))
41+
42+
const elem1 = <FunctionComponent />;
43+
>elem1 : Symbol(elem1, Decl(jsxComponentTypeErrors.tsx, 19, 5))
44+
>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5))
45+
46+
const elem2 = <ClassComponent />;
47+
>elem2 : Symbol(elem2, Decl(jsxComponentTypeErrors.tsx, 20, 5))
48+
>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3))
49+
50+
const elem3 = <MixedComponent />;
51+
>elem3 : Symbol(elem3, Decl(jsxComponentTypeErrors.tsx, 21, 5))
52+
>MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 17, 5))
53+
54+
const obj = {
55+
>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5))
56+
57+
MemberFunctionComponent() {
58+
>MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13))
59+
60+
return {};
61+
},
62+
MemberClassComponent: class {},
63+
>MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4))
64+
65+
};
66+
67+
const elem4 = <obj.MemberFunctionComponent />;
68+
>elem4 : Symbol(elem4, Decl(jsxComponentTypeErrors.tsx, 30, 5))
69+
>obj.MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13))
70+
>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5))
71+
>MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13))
72+
73+
const elem5 = <obj.MemberClassComponent />;
74+
>elem5 : Symbol(elem5, Decl(jsxComponentTypeErrors.tsx, 31, 5))
75+
>obj.MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4))
76+
>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5))
77+
>MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4))
78+

‎tests/baselines/reference/jsxComponentTypeErrors.types

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
=== tests/cases/compiler/jsxComponentTypeErrors.tsx ===
2+
namespace JSX {
3+
export interface Element {
4+
type: 'element';
5+
>type : "element"
6+
}
7+
export interface ElementClass {
8+
type: 'element-class';
9+
>type : "element-class"
10+
}
11+
}
12+
13+
const FunctionComponent = () => ({
14+
>FunctionComponent : () => { type: string; }
15+
>() => ({ type: 'string',}) : () => { type: string; }
16+
>({ type: 'string',}) : { type: string; }
17+
>{ type: 'string',} : { type: string; }
18+
19+
type: 'string',
20+
>type : string
21+
>'string' : "string"
22+
23+
});
24+
25+
class ClassComponent {
26+
>ClassComponent : ClassComponent
27+
28+
type = 'string';
29+
>type : string
30+
>'string' : "string"
31+
}
32+
33+
const MixedComponent = Math.random() ? FunctionComponent : ClassComponent;
34+
>MixedComponent : (() => { type: string; }) | typeof ClassComponent
35+
>Math.random() ? FunctionComponent : ClassComponent : (() => { type: string; }) | typeof ClassComponent
36+
>Math.random() : number
37+
>Math.random : () => number
38+
>Math : Math
39+
>random : () => number
40+
>FunctionComponent : () => { type: string; }
41+
>ClassComponent : typeof ClassComponent
42+
43+
const elem1 = <FunctionComponent />;
44+
>elem1 : JSX.Element
45+
><FunctionComponent /> : JSX.Element
46+
>FunctionComponent : () => { type: string; }
47+
48+
const elem2 = <ClassComponent />;
49+
>elem2 : JSX.Element
50+
><ClassComponent /> : JSX.Element
51+
>ClassComponent : typeof ClassComponent
52+
53+
const elem3 = <MixedComponent />;
54+
>elem3 : JSX.Element
55+
><MixedComponent /> : JSX.Element
56+
>MixedComponent : (() => { type: string; }) | typeof ClassComponent
57+
58+
const obj = {
59+
>obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; }
60+
>{ MemberFunctionComponent() { return {}; }, MemberClassComponent: class {},} : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; }
61+
62+
MemberFunctionComponent() {
63+
>MemberFunctionComponent : () => {}
64+
65+
return {};
66+
>{} : {}
67+
68+
},
69+
MemberClassComponent: class {},
70+
>MemberClassComponent : typeof MemberClassComponent
71+
>class {} : typeof MemberClassComponent
72+
73+
};
74+
75+
const elem4 = <obj.MemberFunctionComponent />;
76+
>elem4 : JSX.Element
77+
><obj.MemberFunctionComponent /> : JSX.Element
78+
>obj.MemberFunctionComponent : () => {}
79+
>obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; }
80+
>MemberFunctionComponent : () => {}
81+
82+
const elem5 = <obj.MemberClassComponent />;
83+
>elem5 : JSX.Element
84+
><obj.MemberClassComponent /> : JSX.Element
85+
>obj.MemberClassComponent : typeof MemberClassComponent
86+
>obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; }
87+
>MemberClassComponent : typeof MemberClassComponent
88+

‎tests/cases/compiler/jsxComponentTypeErrors.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// @strict: true
2+
// @jsx: preserve
3+
namespace JSX {
4+
export interface Element {
5+
type: 'element';
6+
}
7+
export interface ElementClass {
8+
type: 'element-class';
9+
}
10+
}
11+
12+
const FunctionComponent = () => ({
13+
type: 'string',
14+
});
15+
16+
class ClassComponent {
17+
type = 'string';
18+
}
19+
20+
const MixedComponent = Math.random() ? FunctionComponent : ClassComponent;
21+
22+
const elem1 = <FunctionComponent />;
23+
const elem2 = <ClassComponent />;
24+
const elem3 = <MixedComponent />;
25+
26+
const obj = {
27+
MemberFunctionComponent() {
28+
return {};
29+
},
30+
MemberClassComponent: class {},
31+
};
32+
33+
const elem4 = <obj.MemberFunctionComponent />;
34+
const elem5 = <obj.MemberClassComponent />;

0 commit comments

Comments
 (0)