Add ts esModuleInterop false and true tests (#932)

package.json

@@ -93,13 +93,14 @@
     "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:umd && npm run build:amd && npm run copy",
     "preversion": "npm run build && git push",
     "postversion": "git push && git push --tags",
-    "pretest": "npm run test:typescript",
+    "pretest": "npm run test:typescript && npm run test:typescript:noninterop",
     "test": "BABEL_ENV=development jest --no-cache",
     "test:watch": "BABEL_ENV=development jest --no-cache --watch",
     "test:coverage": "BABEL_ENV=development jest --no-cache --coverage",
     "test:coverageOldEnzymeAdapter": "enzyme-adapter-react-install 16 && BABEL_ENV=development jest --no-cache --coverage",
     "test:lint": "./node_modules/.bin/eslint ./src",
     "test:typescript": "tslint --project tsconfig.json",
+    "test:typescript:noninterop": "tslint --project tsconfig.nonEsModuleInterop.json",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "prettier": "prettier --write \"{,**/}*.{ts,tsx,js,json,md}\""

test/typescript/nonEsModuleInterop/examples.test.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useTranslation, Trans, withTranslation, WithTranslation } from 'react-i18next';
+
+// use
+
+// Component using the Trans component
+function MyComponent() {
+  return (
+    <Trans i18nKey="description.part1">
+      To get started, edit <code>src/App.js</code> and save to reload.
+    </Trans>
+  );
+}
+
+// Component using the Trans component without children (Self-closing)
+function MyComponentWithoutChildren() {
+  return <Trans i18nKey="description.part1" />;
+}
+
+// page uses the hook
+function Page() {
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className="App">
+      <React.Suspense fallback={<Loader />}>
+        <div className="App-header">
+          <button onClick={() => changeLanguage('de')}>de</button>
+          <button onClick={() => changeLanguage('en')}>en</button>
+        </div>
+        <div className="App-intro">
+          <MyComponent />
+        </div>
+        <div>{t('description.part2')}</div>
+      </React.Suspense>
+    </div>
+  );
+}
+
+// loading component for suspence fallback
+const Loader = () => <div className="App">Loading...</div>;
+
+// here app catches the suspense from page in case translations are not yet loaded
+export default function App() {
+  return (
+    <React.Suspense fallback={<Loader />}>
+      <Page />
+    </React.Suspense>
+  );
+}
+
+export function componentsWithoutSuspenseUsage() {
+  // Component that uses ready to wait until translations are loaded because useSuspense is set to false
+  function ComponentNotUsingSuspense() {
+    const { t, ready } = useTranslation();
+    return <div>{ready && t('key1')}</div>;
+  }
+
+  // Class based component that uses tReady to wait until translations are loaded because useSuspense is set to false
+  class ClassComponentNotUsingSuspense extends React.Component<WithTranslation> {
+    render() {
+      const { t, tReady } = this.props;
+      return <h2>{tReady && t('title')}</h2>;
+    }
+  }
+  const NotUsingSuspense = withTranslation()(ClassComponentNotUsingSuspense);
+
+  return (
+    <React.Fragment>
+      <ComponentNotUsingSuspense />
+      <NotUsingSuspense />
+    </React.Fragment>
+  );
+}

tsconfig.json

@@ -9,7 +9,11 @@
     "strict": true,
     "noEmit": true,
     "baseUrl": ".",
-    "paths": { "react-i18next": ["./src"] }
+    "paths": { "react-i18next": ["./src"] },
+
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["./src/**/*", "./test/**/*"]
+  "include": ["./src/**/*", "./test/**/*"],
+  "exclude": ["test/typescript/nonEsModuleInterop/**/*.ts"]
 }

tsconfig.nonEsModuleInterop.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // typescript defaults to these
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": false
+  },
+  "include": ["./test/typescript/nonEsModuleInterop/**/*.ts"],
+  "exclude": []
+}