Add react-loadable TS2.4 tests (#17965)

* Add tests using import() to react-loadable

* Fix lint errors in react-loadable tests

* Add comment to react-loadable to clarify a common issue

types/react-loadable/index.d.ts

@@ -2,7 +2,7 @@
 // Project: https://github.com/thejameskyle/react-loadable#readme
 // Definitions by: Diogo Franco <https://github.com/Kovensky>, Oden S. <https://github.com/odensc>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 2.4
 
 import * as React from 'react';
 
@@ -68,6 +68,11 @@ export interface OptionsWithRender<Props, Exports extends object> extends Common
      * ```
      */
     render(loaded: Exports, props: Props): React.ReactNode;
+
+    // NOTE: render is not optional if the loader return type is not compatible with the type
+    // expected in `OptionsWithoutRender`. If you do not want to provide a render function, ensure that your
+    // function is returning a promise for a React.ComponentType or is the result of import()ing a module
+    // that has a component as its `default` export.
 }
 
 export interface OptionsWithMap<Props, Exports extends { [key: string]: any }> extends CommonOptions {

types/react-loadable/test/imports/no-default.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+interface Props {
+  text: string;
+}
+
+export const AComponent: React.SFC<Props> = ({ text }) => <span>{text}</span>;

types/react-loadable/test/imports/with-default.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface Props {
+  foo: boolean;
+}
+
+export default class AComponent extends React.Component<Props> {
+  render() {
+    return this.props.foo ? <div/> : null;
+  }
+}

types/react-loadable/test/index.tsx

@@ -82,3 +82,28 @@ const used300 = <Loadable300 text='300' />;
 const used400 = <Loadable400 text='400' />;
 
 Loadable100.preload();
+
+// dynamic import syntax confuses tslint@5.5.0, so some disable comments were necessary.
+// all of these disables are specifically for working around this issue,
+// no rules were intended to be skipped.
+
+// tslint:disable-next-line one-variable-per-declaration
+const WithImport = Loadable({
+  loader: () => import('./imports/with-default'),
+  loading: LoadingComponent // tslint:disable-line semicolon
+  // render is optional
+}); // tslint:disable-line semicolon
+
+const usedImport = <WithImport foo={false}/>;
+
+// tslint:disable-next-line one-variable-per-declaration
+const WithImportNoDefault = Loadable({
+  loader: () => import('./imports/no-default'),
+  loading: LoadingComponent,
+  // render is mandatory
+  render(loaded, props: { text: string }) { // tslint:disable-line whitespace
+    return <loaded.AComponent {...props}/>;
+  } // tslint:disable-line semicolon
+}); // tslint:disable-line semicolon
+
+const usedImportNodefault = <WithImportNoDefault text='import'/>;

types/react-loadable/tsconfig.json

@@ -18,6 +18,8 @@
     },
     "files": [
         "index.d.ts",
-        "react-loadable-tests.tsx"
+        "test/index.tsx",
+        "test/imports/no-default.tsx",
+        "test/imports/with-default.tsx"
     ]
 }