🐛 Bug Report
A translation string with less than sign < breaks the tag parsing with <Trans> component
To Reproduce
Add this test case to test/trans.render.object.spec.jsx: (modifying the test case on line 65 there)
describe('trans using no children but components (object) - using names', () => {
function TestComponent() {
return (
<Trans
defaults="hello <italic>under ten</italic><10 this text after the sign should be rendered <bold>{{what}}</bold>"
values={{ what: 'world' }}
components={{ italic: <i>just dummy</i>, bold: <strong>univers</strong> }}
/>
);
}
it('should render translated string', () => {
const { container } = render(<TestComponent />);
expect(container.firstChild).toMatchInlineSnapshot(`
<div>
hello
<i>
under ten
</i>
<10 this text after the sign should be redered
<strong>
world
</strong>
</div>
`);
});
});Run npm test, it fails with output
FAIL |runtime| test/trans.render.object.spec.jsx > trans using no children but components (object) - using names > should render translated string
Error: Snapshot `trans using no children but components (object) - using names > should render translated string 2` mismatched
- Expected
+ Received
<div>
hello
<i>
under ten
</i>
- <10 this text after the sign should be rendered
- <strong>
- world
- </strong>
+ world
</div>
❯ test/trans.render.object.spec.jsx:104:34
102| it('should render translated string', () => {
103| const { container } = render(<TestComponent />);
104| expect(container.firstChild).toMatchInlineSnapshot(`
| ^
105| <div>
106| hello
Expected behavior
The test should pass.
The problem is that having a less than sign (<) within the translated text breaks the system extracting the tags.
The text between the < sign and the next tag opening won't be rendered at all. The next tag won't be rendered correctly.
I assume that in the test case snippet, it reads the following as the tag: <10 this text after the sign should be rendered <bold>
Your Environment
- runtime version: node v18.18.0, latest Chrome and Safari
- i18next version:
master, 14.1.0
- os: macOS
🐛 Bug Report
A translation string with less than sign
<breaks the tag parsing with<Trans>componentTo Reproduce
Add this test case to
test/trans.render.object.spec.jsx: (modifying the test case on line 65 there)Run
npm test, it fails with outputExpected behavior
The test should pass.
The problem is that having a less than sign (
<) within the translated text breaks the system extracting the tags.The text between the
<sign and the next tag opening won't be rendered at all. The next tag won't be rendered correctly.I assume that in the test case snippet, it reads the following as the tag:
<10 this text after the sign should be rendered <bold>Your Environment
master, 14.1.0