align context handling of Trans component with t function, fixes #1729

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 14.0.6
+
+- align context handling of Trans component with t function, fixes [1729](https://github.com/i18next/react-i18next/issues/1729)
+
 ### 14.0.5
 
 - Fix [1691](https://github.com/i18next/react-i18next/issues/1691) for strict mode, by preserving change language binding [1720](https://github.com/i18next/react-i18next/pull/1720)

react-i18next.js

@@ -459,7 +459,7 @@
 	    return children;
 	  }
 	  const t = tFromProps || i18n.t.bind(i18n) || (k => k);
-	  if (context) tOptions.context = context;
+	  tOptions.context = context;
 	  const reactI18nextOptions = {
 	    ...getDefaults(),
 	    ...(i18n.options && i18n.options.react)

react-i18next.min.js

@@ -329,7 +329,7 @@ export function Trans({
 
   const t = tFromProps || i18n.t.bind(i18n) || ((k) => k);
 
-  if (context) tOptions.context = context;
+  tOptions.context = context;
 
   const reactI18nextOptions = { ...getDefaults(), ...(i18n.options && i18n.options.react) };
 

src/TransWithoutContext.js

@@ -48,6 +48,8 @@ i18n.init({
         transTestCustomUnescapeSecond: 'Vertrauens­kennwert',
         testTransWithCtx: 'Go <1>there</1>.',
         testTransWithCtx_home: 'Go <1>home</1>.',
+        testTransNoChildrenWithCtx: 'Go {{context}}.',
+        testTransNoChildrenWithCtx_home: 'Go to Switzerland.',
         'You have {{count}} message_one': 'You have {{count}} message',
         'You have {{count}} message_other': 'You have {{count}} messages',
         deepPath: {

test/i18n.js

@@ -835,6 +835,82 @@ describe('trans with context property', () => {
   });
 });
 
+describe('trans with undefined context property', () => {
+  function TestComponent({ parent }) {
+    return (
+      <Trans i18nKey="testTransWithCtx" context={undefined} parent={parent}>
+        Open <Link to="/msgs">here</Link>.
+      </Trans>
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Go 
+        <a
+          href="/msgs"
+        >
+          there
+        </a>
+        .
+      </div>
+    `);
+  });
+});
+
+describe('trans with context property but no children', () => {
+  function TestComponent({ parent }) {
+    return (
+      <Trans i18nKey="testTransNoChildrenWithCtx" context="home" parent={parent} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Go to Switzerland.
+      </div>
+    `);
+  });
+});
+
+describe('trans with undefined context property but no children', () => {
+  function TestComponent({ parent }) {
+    return (
+      <Trans i18nKey="testTransNoChildrenWithCtx" context={undefined} parent={parent} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Go .
+      </div>
+    `);
+  });
+});
+
+describe('trans with different context property but no children', () => {
+  function TestComponent({ parent }) {
+    return (
+      <Trans i18nKey="testTransNoChildrenWithCtx" context="somewhere" parent={parent} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Go somewhere.
+      </div>
+    `);
+  });
+});
+
 describe('trans with defaults property and children', () => {
   function TestComponent() {
     return (