diff --git a/tests/baselines/reference/tsxUnionTypeComponent.errors.txt b/tests/baselines/reference/tsxUnionTypeComponent.errors.txt
deleted file mode 100644
index 6650db4533b..00000000000
--- a/tests/baselines/reference/tsxUnionTypeComponent.errors.txt
+++ /dev/null
@@ -1,35 +0,0 @@
-tests/cases/conformance/jsx/file.tsx(28,2): error TS2604: JSX element type 'X' does not have any construct or call signatures.
-
-
-==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
-    
-    import React = require('react');
-    
-    interface ComponentProps {
-        AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
-    }
-    
-    class MyComponent extends React.Component<ComponentProps, {}> {
-        render() {
-            const { AnyComponent } = this.props;
-            const someProps = {};
-            const button = <AnyComponent {...someProps}/>
-            return (<div>{button}</div>);
-        }
-    }
-    
-    <MyComponent AnyComponent={() => <button>test</button>}/>
-    
-    class MyButtonComponent extends React.Component<{},{}> {
-    }
-    
-    <MyComponent AnyComponent={MyButtonComponent} />
-    
-    type Invalid = string | React.ComponentClass<any>;
-    
-    var X: Invalid = "";
-    
-    <X /> // Should fail
-     ~
-!!! error TS2604: JSX element type 'X' does not have any construct or call signatures.
-    
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxUnionTypeComponent.js b/tests/baselines/reference/tsxUnionTypeComponent1.js
similarity index 66%
rename from tests/baselines/reference/tsxUnionTypeComponent.js
rename to tests/baselines/reference/tsxUnionTypeComponent1.js
index 5b105abcb83..11b41a2aa3d 100644
--- a/tests/baselines/reference/tsxUnionTypeComponent.js
+++ b/tests/baselines/reference/tsxUnionTypeComponent1.js
@@ -9,24 +9,19 @@ interface ComponentProps {
 class MyComponent extends React.Component<ComponentProps, {}> {
     render() {
         const { AnyComponent } = this.props;
-        const someProps = {};
-        const button = <AnyComponent {...someProps}/>
-        return (<div>{button}</div>);
+        return (<AnyComponent />);
     }
 }
 
+// Stateless Component As Props
 <MyComponent AnyComponent={() => <button>test</button>}/>
 
+// Component Class as Props
 class MyButtonComponent extends React.Component<{},{}> {
 }
 
 <MyComponent AnyComponent={MyButtonComponent} />
 
-type Invalid = string | React.ComponentClass<any>;
-
-var X: Invalid = "";
-
-<X /> // Should fail
 
 
 //// [file.js]
@@ -36,14 +31,6 @@ var __extends = (this && this.__extends) || function (d, b) {
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
-};
 var React = require('react');
 var MyComponent = (function (_super) {
     __extends(MyComponent, _super);
@@ -52,13 +39,13 @@ var MyComponent = (function (_super) {
     }
     MyComponent.prototype.render = function () {
         var AnyComponent = this.props.AnyComponent;
-        var someProps = {};
-        var button = React.createElement(AnyComponent, __assign({}, someProps));
-        return (React.createElement("div", null, button));
+        return (React.createElement(AnyComponent, null));
     };
     return MyComponent;
 }(React.Component));
+// Stateless Component As Props
 React.createElement(MyComponent, {AnyComponent: function () { return React.createElement("button", null, "test"); }});
+// Component Class as Props
 var MyButtonComponent = (function (_super) {
     __extends(MyButtonComponent, _super);
     function MyButtonComponent() {
@@ -67,5 +54,3 @@ var MyButtonComponent = (function (_super) {
     return MyButtonComponent;
 }(React.Component));
 React.createElement(MyComponent, {AnyComponent: MyButtonComponent});
-var X = "";
-React.createElement(X, null); // Should fail
diff --git a/tests/baselines/reference/tsxUnionTypeComponent1.symbols b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
new file mode 100644
index 00000000000..73f7180f3b8
--- /dev/null
+++ b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
@@ -0,0 +1,58 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface ComponentProps {
+>ComponentProps : Symbol(ComponentProps, Decl(file.tsx, 1, 32))
+
+    AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
+>AnyComponent : Symbol(ComponentProps.AnyComponent, Decl(file.tsx, 3, 26))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>StatelessComponent : Symbol(React.StatelessComponent, Decl(react.d.ts, 139, 5))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>ComponentClass : Symbol(React.ComponentClass, Decl(react.d.ts, 150, 5))
+}
+
+class MyComponent extends React.Component<ComponentProps, {}> {
+>MyComponent : Symbol(MyComponent, Decl(file.tsx, 5, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
+>ComponentProps : Symbol(ComponentProps, Decl(file.tsx, 1, 32))
+
+    render() {
+>render : Symbol(MyComponent.render, Decl(file.tsx, 7, 63))
+
+        const { AnyComponent } = this.props;
+>AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 9, 15))
+>this.props : Symbol(React.Component.props, Decl(react.d.ts, 122, 30))
+>this : Symbol(MyComponent, Decl(file.tsx, 5, 1))
+>props : Symbol(React.Component.props, Decl(react.d.ts, 122, 30))
+
+        return (<AnyComponent />);
+>AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 9, 15))
+    }
+}
+
+// Stateless Component As Props
+<MyComponent AnyComponent={() => <button>test</button>}/>
+>MyComponent : Symbol(MyComponent, Decl(file.tsx, 5, 1))
+>AnyComponent : Symbol(ComponentProps.AnyComponent, Decl(file.tsx, 3, 26))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 913, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 913, 43))
+
+// Component Class as Props
+class MyButtonComponent extends React.Component<{},{}> {
+>MyButtonComponent : Symbol(MyButtonComponent, Decl(file.tsx, 15, 57))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
+}
+
+<MyComponent AnyComponent={MyButtonComponent} />
+>MyComponent : Symbol(MyComponent, Decl(file.tsx, 5, 1))
+>AnyComponent : Symbol(ComponentProps.AnyComponent, Decl(file.tsx, 3, 26))
+>MyButtonComponent : Symbol(MyButtonComponent, Decl(file.tsx, 15, 57))
+
+
diff --git a/tests/baselines/reference/tsxUnionTypeComponent1.types b/tests/baselines/reference/tsxUnionTypeComponent1.types
new file mode 100644
index 00000000000..ce6e3bbeecc
--- /dev/null
+++ b/tests/baselines/reference/tsxUnionTypeComponent1.types
@@ -0,0 +1,64 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+import React = require('react');
+>React : typeof React
+
+interface ComponentProps {
+>ComponentProps : ComponentProps
+
+    AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
+>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
+>React : any
+>StatelessComponent : React.StatelessComponent<P>
+>React : any
+>ComponentClass : React.ComponentClass<P>
+}
+
+class MyComponent extends React.Component<ComponentProps, {}> {
+>MyComponent : MyComponent
+>React.Component : React.Component<ComponentProps, {}>
+>React : typeof React
+>Component : typeof React.Component
+>ComponentProps : ComponentProps
+
+    render() {
+>render : () => JSX.Element
+
+        const { AnyComponent } = this.props;
+>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
+>this.props : ComponentProps
+>this : this
+>props : ComponentProps
+
+        return (<AnyComponent />);
+>(<AnyComponent />) : JSX.Element
+><AnyComponent /> : JSX.Element
+>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
+    }
+}
+
+// Stateless Component As Props
+<MyComponent AnyComponent={() => <button>test</button>}/>
+><MyComponent AnyComponent={() => <button>test</button>}/> : JSX.Element
+>MyComponent : typeof MyComponent
+>AnyComponent : any
+>() => <button>test</button> : () => JSX.Element
+><button>test</button> : JSX.Element
+>button : any
+>button : any
+
+// Component Class as Props
+class MyButtonComponent extends React.Component<{},{}> {
+>MyButtonComponent : MyButtonComponent
+>React.Component : React.Component<{}, {}>
+>React : typeof React
+>Component : typeof React.Component
+}
+
+<MyComponent AnyComponent={MyButtonComponent} />
+><MyComponent AnyComponent={MyButtonComponent} /> : JSX.Element
+>MyComponent : typeof MyComponent
+>AnyComponent : any
+>MyButtonComponent : typeof MyButtonComponent
+
+
diff --git a/tests/baselines/reference/tsxUnionTypeComponent2.errors.txt b/tests/baselines/reference/tsxUnionTypeComponent2.errors.txt
new file mode 100644
index 00000000000..e5a5c77da4c
--- /dev/null
+++ b/tests/baselines/reference/tsxUnionTypeComponent2.errors.txt
@@ -0,0 +1,17 @@
+tests/cases/conformance/jsx/file.tsx(8,2): error TS2604: JSX element type 'X' does not have any construct or call signatures.
+
+
+==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
+    
+    import React = require('react');
+    
+    type Invalid1 = React.ComponentClass<any> | string;
+    
+    const X: Invalid1 = "Should fail to construct";
+    
+    <X />;
+     ~
+!!! error TS2604: JSX element type 'X' does not have any construct or call signatures.
+    
+    
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxUnionTypeComponent2.js b/tests/baselines/reference/tsxUnionTypeComponent2.js
new file mode 100644
index 00000000000..18e86eb8b4c
--- /dev/null
+++ b/tests/baselines/reference/tsxUnionTypeComponent2.js
@@ -0,0 +1,18 @@
+//// [file.tsx]
+
+import React = require('react');
+
+type Invalid1 = React.ComponentClass<any> | string;
+
+const X: Invalid1 = "Should fail to construct";
+
+<X />;
+
+
+
+
+//// [file.js]
+"use strict";
+var React = require('react');
+var X = "Should fail to construct";
+React.createElement(X, null);
diff --git a/tests/cases/conformance/jsx/tsxUnionTypeComponent.tsx b/tests/cases/conformance/jsx/tsxUnionTypeComponent1.tsx
similarity index 71%
rename from tests/cases/conformance/jsx/tsxUnionTypeComponent.tsx
rename to tests/cases/conformance/jsx/tsxUnionTypeComponent1.tsx
index 073d4f37200..b9e50357185 100644
--- a/tests/cases/conformance/jsx/tsxUnionTypeComponent.tsx
+++ b/tests/cases/conformance/jsx/tsxUnionTypeComponent1.tsx
@@ -12,21 +12,16 @@ interface ComponentProps {
 class MyComponent extends React.Component<ComponentProps, {}> {
     render() {
         const { AnyComponent } = this.props;
-        const someProps = {};
-        const button = <AnyComponent {...someProps}/>
-        return (<div>{button}</div>);
+        return (<AnyComponent />);
     }
 }
 
+// Stateless Component As Props
 <MyComponent AnyComponent={() => <button>test</button>}/>
 
+// Component Class as Props
 class MyButtonComponent extends React.Component<{},{}> {
 }
 
 <MyComponent AnyComponent={MyButtonComponent} />
 
-type Invalid = string | React.ComponentClass<any>;
-
-var X: Invalid = "";
-
-<X /> // Should fail
diff --git a/tests/cases/conformance/jsx/tsxUnionTypeComponent2.tsx b/tests/cases/conformance/jsx/tsxUnionTypeComponent2.tsx
new file mode 100644
index 00000000000..39807219661
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxUnionTypeComponent2.tsx
@@ -0,0 +1,14 @@
+// @filename: file.tsx
+// @jsx: react
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+type Invalid1 = React.ComponentClass<any> | string;
+
+const X: Invalid1 = "Should fail to construct";
+
+<X />;
+
+