Extend withTranslation tests to include optional props (#1009)

src/index.d.ts

@@ -79,14 +79,20 @@ export interface WithTranslation extends WithT {
   i18n: i18n;
   tReady: boolean;
 }
+
+export interface WithTranslationProps {
+  i18n?: i18n;
+  useSuspense?: boolean;
+}
+
 export function withTranslation(
   ns?: Namespace,
   options?: {
     withRef?: boolean;
   },
 ): <P extends WithTranslation>(
   component: React.ComponentType<P>,
-) => React.ComponentType<Omit<P, keyof WithTranslation>>;
+) => React.ComponentType<Omit<P, keyof WithTranslation> & WithTranslationProps>;
 
 export interface I18nextProviderProps {
   i18n: i18n;

test/typescript/i18n.ts

@@ -0,0 +1,65 @@
+import i18n from 'i18next';
+
+// set instance on hooks stuff
+// import { setI18n } from '../../src/context';
+//
+// setI18n(i18n);
+
+i18n.init({
+  lng: 'en',
+  fallbackLng: 'en',
+
+  resources: {
+    en: {
+      translation: {
+        key1: 'test',
+        interpolateKey: 'add {{insert}} {{up, uppercase}}',
+        interpolateKey2: '<strong>add</strong> {{insert}} {{up, uppercase}}',
+        transTest1: 'Go <1>there</1>.',
+        transTest1_noParent: '<0>Go <1>there</1>.</0>',
+        transTest1_customHtml: '<strong>Go</strong> <br/><1>there</1>.',
+        transTest1_customHtml2: '<strong>Go</strong> <br/> there.',
+        transTest1_customHtml3:
+          '<strong>Go</strong><video /><script>console.warn("test")</script> there.',
+        transTest2:
+          'Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> message. Open <5>hear</5>.',
+        transTest2_plural:
+          'Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> messages. Open <5>here</5>.',
+        transTest2InV2: 'Hello <1>{{name}}</1>, you have {{count}} message. Open <5>hear</5>.',
+        transTest2InV2_plural:
+          'Hello <1>{{name}}</1>, you have {{count}} messages. Open <5>here</5>.',
+        testTransKey1: '<0>{{numOfItems}}</0> item matched.',
+        testTransKey1_plural: '<0>{{numOfItems}}</0> items matched.',
+        testTransKey2: '<0><0>{{numOfItems}}</0></0> item matched.',
+        testTransKey2_plural: '<0><0>{{numOfItems}}</0></0> items matched.',
+        testTransKey3: 'Result: <1><0>{{numOfItems}}</0></1> item matched.',
+        testTransKey3_plural: 'Result: <1><0>{{numOfItems}}</0></1> items matched.',
+        testInvalidHtml: '<hello',
+        testInvalidHtml2: '<hello>',
+        testTrans4KeyWithNestedComponent: 'Result should be a list: <0></0>',
+        testTrans5KeyWithNestedComponent: 'Result should be a list: <1></1>',
+        testTrans5KeyWithValue: 'Result should be rendered within tag <0>{{testValue}}</0>',
+      },
+      other: {
+        transTest1: 'Another go <1>there</1>.',
+      },
+    },
+  },
+
+  interpolation: {
+    escapeValue: false, // not needed for react!!
+    formatSeparator: ',',
+    format(value, format) {
+      if (format === 'uppercase') return value.toUpperCase();
+      return value;
+    },
+  },
+
+  react: {
+    defaultTransParent: 'div',
+    transSupportBasicHtmlNodes: true,
+    transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+  },
+});
+
+export default i18n;

test/typescript/withTranslation.test.tsx

@@ -1,19 +1,47 @@
 import * as React from 'react';
 import { withTranslation, WithTranslation } from 'react-i18next';
+import { default as myI18n } from './i18n';
 
-interface FooProps {
+interface MyComponentProps extends WithTranslation {
   bar: 'baz';
 }
 
-class Foo extends React.Component<FooProps & WithTranslation> {
-  render() {
-    const { t, i18n } = this.props;
-    return <h2>{t('title')}</h2>;
-  }
-}
-const TranslatedFoo = withTranslation()(Foo);
+const MyComponent = (props: MyComponentProps) => {
+  const { t, i18n } = props;
+  return <h2>{t('title')}</h2>;
+};
 
 // page uses the hook
-function usage() {
-  return <TranslatedFoo bar="baz" />;
+function defaultUsage() {
+  const ExtendedComponent = withTranslation()(MyComponent);
+  return <ExtendedComponent bar="baz" />;
+}
+
+/**
+ * @see https://react.i18next.com/latest/withtranslation-hoc#withtranslation-params
+ */
+function withNs() {
+  const ExtendedComponent = withTranslation('ns')(MyComponent);
+  return <ExtendedComponent bar="baz" />;
+}
+
+function withNsArray() {
+  const ExtendedComponent = withTranslation(['ns', 'ns2'])(MyComponent);
+  return <ExtendedComponent bar="baz" />;
+}
+
+/**
+ * @see https://react.i18next.com/latest/withtranslation-hoc#overriding-the-i-18-next-instance
+ */
+function withI18nOverride() {
+  const ExtendedComponent = withTranslation('ns')(MyComponent);
+  return <ExtendedComponent bar="baz" i18n={myI18n} />;
+}
+
+/**
+ * @see https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense
+ */
+function withSuspense() {
+  const ExtendedComponent = withTranslation('ns')(MyComponent);
+  return <ExtendedComponent bar="baz" useSuspense={false} />;
 }