fix: Trans named tags with underscore (#1901)

Co-authored-by: benja <benja@fintual.com>

Author: benjaurr

src/TransWithoutContext.js

@@ -160,7 +160,7 @@ const escapeLiteralLessThan = (str, keepArray = [], knownComponentsMap = {}) =>
       let isValidTag = false;
 
       // Check for closing tag: </number> or </name>
-      const closingMatch = str.slice(i).match(/^<\/(\d+|[a-zA-Z][a-zA-Z0-9-]*)>/);
+      const closingMatch = str.slice(i).match(/^<\/(\d+|[a-zA-Z][a-zA-Z0-9_-]*)>/);
       if (closingMatch) {
         const tagName = closingMatch[1];
         // Valid if it's a number or in our valid names list
@@ -179,7 +179,7 @@ const escapeLiteralLessThan = (str, keepArray = [], knownComponentsMap = {}) =>
         const openingMatch = str
           .slice(i)
           .match(
-            /^<(\d+|[a-zA-Z][a-zA-Z0-9-]*)(\s+[\w-]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?)*\s*(\/)?>/,
+            /^<(\d+|[a-zA-Z][a-zA-Z0-9_-]*)(\s+[\w-]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?)*\s*(\/)?>/,
           );
         if (openingMatch) {
           const tagName = openingMatch[1];

test/trans.render.object.spec.jsx

@@ -416,3 +416,28 @@ describe('trans with hyphenated component names', () => {
     `);
   });
 });
+
+describe('trans with underscore component names', () => {
+  function TestComponent() {
+    return (
+      <Trans
+        defaults="Click <my_button>here</my_button> to continue"
+        components={{ my_button: <button type="button">dummy</button> }}
+      />
+    );
+  }
+  it('should render underscore component names correctly', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Click 
+        <button
+          type="button"
+        >
+          here
+        </button>
+         to continue
+      </div>
+    `);
+  });
+});