don't use defaults prop as default key (#1664)

i18next · Aug 22, 2023 · 079938c · 079938c
1 parent 52d514c
commit 079938c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/src/TransWithoutContext.js b/src/TransWithoutContext.js
@@ -328,13 +328,11 @@ export function Trans({
   let namespaces = ns || t.ns || (i18n.options && i18n.options.defaultNS);
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
 
+  const nodeAsString = nodesToString(children, reactI18nextOptions);
   const defaultValue =
-    defaults ||
-    nodesToString(children, reactI18nextOptions) ||
-    reactI18nextOptions.transEmptyNodeValue ||
-    i18nKey;
+    defaults || nodeAsString || reactI18nextOptions.transEmptyNodeValue || i18nKey;
   const { hashTransKey } = reactI18nextOptions;
-  const key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
+  const key = i18nKey || (hashTransKey ? hashTransKey(nodeAsString) : nodeAsString);
   const interpolationOverride = values
     ? tOptions.interpolation
     : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };

diff --git a/test/i18n.js b/test/i18n.js
@@ -47,6 +47,8 @@ i18n.init({
         transTestCustomUnescapeSecond: 'Vertrauens&shy;kennwert',
         testTransWithCtx: 'Go <1>there</1>.',
         testTransWithCtx_home: 'Go <1>home</1>.',
+        'You have {{count}} message_one': 'You have {{count}} message',
+        'You have {{count}} message_other': 'You have {{count}} messages',
         deepPath: {
           deepKey1: 'value1',
         },

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -755,3 +755,22 @@ describe('trans with context property', () => {
     `);
   });
 });
+
+describe('trans with defaults property and children', () => {
+  function TestComponent() {
+    return (
+      <Trans count={3} defaults="This property should not get used">
+        You have {{ count: 3 }} message
+      </Trans>
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        You have 3 messages
+      </div>
+    `);
+  });
+});