diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
new file mode 100644
index 00000000000..ea950d8b6d4
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
@@ -0,0 +1,44 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react')
+
+declare function OneThing(k: {yxx: string}): JSX.Element;
+declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
+declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
+declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
+
+// OK
+const c1 = <OneThing yxx='ok' />
+const c2 = <OneThing yy={100}  yy1="hello"/>
+const c3 = <OneThing yxx="hello" ignore-prop />
+const c4 = <OneThing data="hello" data-prop />
+
+declare function TestingOneThing({y1: string}): JSX.Element;
+declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
+declare function TestingOneThing(n: {yy: number, direction?: number}): JSX.Element;
+declare function TestingOneThing(n: {yy: string, name: string}): JSX.Element;
+
+// OK
+const d1 = <TestingOneThing y1 extra-data />;
+const d2 = <TestingOneThing extra-data="hello" />;
+const d3 = <TestingOneThing extra-data="hello" yy="hihi" />;
+const d4 = <TestingOneThing extra-data="hello" yy={9} direction={10} />;
+const d5 = <TestingOneThing extra-data="hello" yy="hello" name="Bob" />;
+
+
+declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
+
+// OK
+const e1 = <TestingOptional />
+const e2 = <TestingOptional extra-prop/>
+const e3 = <TestingOptional y1="hello"/>
+const e4 = <TestingOptional y1="hello" y2={1000} />
+const e5 = <TestingOptional y1 y3/>
+const e6 = <TestingOptional y1 y3 y2={10} />
+
+
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload2.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload2.tsx
new file mode 100644
index 00000000000..fe2a3eb7477
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload2.tsx
@@ -0,0 +1,37 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react')
+declare function OneThing(): JSX.Element;
+declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
+
+let obj = {
+    yy: 10,
+    yy1: "hello"
+}
+
+let obj1 = {
+    yy: true
+}
+
+let obj2 = {
+    yy: 500,
+    "ignore-prop": "hello"
+}
+
+let defaultObj = undefined;
+
+// OK
+const c1 = <OneThing />
+const c2 = <OneThing {...obj}/>
+const c3 = <OneThing {...{}} />
+const c4 = <OneThing {...obj1} {...obj} />
+const c5 = <OneThing {...obj1} yy={42} {...{yy1: "hi"}}/>
+const c6 = <OneThing {...obj1} {...{yy: 10000, yy1: "true"}} />
+const c7 = <OneThing {...defaultObj} yy {...obj} />;  // No error. should pick second overload
+const c8 = <OneThing ignore-prop={100} />
+const c9 = <OneThing {...{ "ignore-prop":200 }} />;
+const c10 = <OneThing {...obj2} yy1="boo" />;
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload3.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload3.tsx
new file mode 100644
index 00000000000..5a21bcfe736
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload3.tsx
@@ -0,0 +1,29 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+interface Context {
+    color: any;
+}
+declare function ZeroThingOrTwoThing(): JSX.Element;
+declare function ZeroThingOrTwoThing(l: {yy: number, yy1: string}, context: Context): JSX.Element;
+
+let obj2 = undefined;
+
+// OK
+const two1 = <ZeroThingOrTwoThing />;
+const two2 = <ZeroThingOrTwoThing yy={100}  yy1="hello"/>;
+const two3 = <ZeroThingOrTwoThing {...obj2} />;  // it is just any so we allow it to pass through
+const two4 = <ZeroThingOrTwoThing  yy={1000} {...obj2} />;  // it is just any so we allow it to pass through
+const two5 = <ZeroThingOrTwoThing  {...obj2} yy={1000} />;  // it is just any so we allow it to pass through
+
+declare function ThreeThing(l: {y1: string}): JSX.Element;
+declare function ThreeThing(l: {y2: string}): JSX.Element;
+declare function ThreeThing(l: {yy: number, yy1: string}, context: Context, updater: any): JSX.Element;
+
+// OK
+const three1 = <ThreeThing yy={99} yy1="hello world" />;
+const three2 = <ThreeThing y2="Bye" />;
+const three3 = <ThreeThing {...obj2} y2={10} />;  // it is just any so we allow it to pass through
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
new file mode 100644
index 00000000000..d94c7a5531c
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
@@ -0,0 +1,39 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react')
+declare function OneThing(): JSX.Element;
+declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
+
+let obj = {
+    yy: 10,
+    yy1: "hello"
+}
+let obj2 = undefined;
+
+// Error
+const c0 = <OneThing extraProp />;  // extra property;
+const c1 = <OneThing yy={10}/>;  // missing property;
+const c2 = <OneThing {...obj} yy1 />; // type incompatible;
+const c3 = <OneThing {...obj} {...{extra: "extra attr"}} />;  // Extra attribute;
+const c4 = <OneThing {...obj} y1={10000} />;  // extra property;
+const c5 = <OneThing {...obj} {...{yy: true}} />;  // type incompatible;
+const c6 = <OneThing {...obj2} {...{extra: "extra attr"}} />;  // Should error as there is extra attribute that doesn't match any. Current it is not
+const c7 = <OneThing {...obj2} yy />;  // Should error as there is extra attribute that doesn't match any. Current it is not
+
+declare function TestingOneThing(j: {"extra-data": string}): JSX.Element;
+declare function TestingOneThing(n: {yy: string, direction?: number}): JSX.Element;
+
+// Error
+const d1 = <TestingOneThing extra-data />
+const d2 = <TestingOneThing yy="hello" direction="left" />
+
+declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
+
+// Error
+const e1 = <TestingOptional y1 y3="hello"/>
+const e2 = <TestingOptional y1="hello" y2={1000} y3 />
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload5.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload5.tsx
new file mode 100644
index 00000000000..8821d0adcce
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload5.tsx
@@ -0,0 +1,62 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react')
+
+export interface ClickableProps {
+    children?: string;
+    className?: string;
+}
+
+export interface ButtonProps extends ClickableProps {
+    onClick: React.MouseEventHandler<any>;
+}
+
+export interface LinkProps extends ClickableProps {
+    to: string;
+}
+
+export interface HyphenProps extends ClickableProps {
+    "data-format": string;
+}
+
+let obj0 = {
+    to: "world"
+};
+
+let obj1 = {
+    children: "hi",
+    to: "boo"
+}
+
+let obj2 = {
+    onClick: ()=>{}
+}
+
+let obj3 = undefined;
+
+export function MainButton(buttonProps: ButtonProps): JSX.Element;
+export function MainButton(linkProps: LinkProps): JSX.Element;
+export function MainButton(hyphenProps: HyphenProps): JSX.Element;
+export function MainButton(props: ButtonProps | LinkProps | HyphenProps): JSX.Element {
+    const linkProps = props as LinkProps;
+    if(linkProps.to) {
+        return this._buildMainLink(props);
+    }
+
+    return this._buildMainButton(props);
+}
+
+// Error
+const b0 = <MainButton to='/some/path' onClick={(e)=>{}}>GO</MainButton>;  // extra property;
+const b1 = <MainButton onClick={(e: any)=> {}} {...obj0}>Hello world</MainButton>;  // extra property;
+const b2 = <MainButton {...{to: "10000"}} {...obj2} />;  // extra property
+const b3 = <MainButton {...{to: "10000"}} {...{onClick: (k) => {}}} />;  // extra property
+const b4 = <MainButton {...obj3} to />;  // Shoudld erro because Incorrect type; but attributes are any so everything is allowed
+const b5 = <MainButton {...{ onclick(){} }} />;  // Spread doesn't retain method declaration
+const b6 = <MainButton {...{ onclick(){} }} children={10} />;  // incorrect type for optional attribute
+const b7 = <MainButton {...{ onclick(){} }} children="hello" className />;  // incorrect type for optional attribute
+const b8 = <MainButton data-format />;  // incorrect type for specified hyphanted name
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
new file mode 100644
index 00000000000..2bd372eaa0d
--- /dev/null
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
@@ -0,0 +1,62 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react')
+
+export interface ClickableProps {
+    children?: string;
+    className?: string;
+}
+
+export interface ButtonProps extends ClickableProps {
+    onClick: React.MouseEventHandler<any>;
+}
+
+export interface LinkProps extends ClickableProps {
+    to: string;
+}
+
+export interface HyphenProps extends ClickableProps {
+    "data-format": string;
+}
+
+let obj = {
+    children: "hi",
+    to: "boo"
+}
+let obj1 = undefined;
+let obj2 = {
+    onClick: () => {}
+}
+
+export function MainButton(buttonProps: ButtonProps): JSX.Element;
+export function MainButton(linkProps: LinkProps): JSX.Element;
+export function MainButton(hyphenProps: HyphenProps): JSX.Element;
+export function MainButton(props: ButtonProps | LinkProps | HyphenProps): JSX.Element {
+    const linkProps = props as LinkProps;
+    if(linkProps.to) {
+        return this._buildMainLink(props);
+    }
+
+    return this._buildMainButton(props);
+}
+
+// OK
+const b0 = <MainButton to='/some/path'>GO</MainButton>;
+const b1 = <MainButton onClick={(e) => {}}>Hello world</MainButton>;
+const b2 = <MainButton {...obj} />;
+const b3 = <MainButton {...{to: 10000}} {...obj} />;
+const b4 = <MainButton {...obj1} />;  // any; just pick the first overload
+const b5 = <MainButton {...obj1} to="/to/somewhere" />;  // should pick the second overload
+const b6 = <MainButton {...obj2} />;
+const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
+const b8 = <MainButton {...obj} {...{onClick() {}}} />;  // OK; method declaration get discarded
+const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
+const b12 = <MainButton data-format="Hello world" />
+
+