Variables Interpolation not working properly when testing with Jest

[psworld]

🐛 Bug Report

variable interpolation not working when I test my react app with Jest.

To Reproduce

InputComp.tsx

import { useTranslation } from 'react-i18next';
const { t } = useTranslation();
return(
<>
{
  t("validationInputError", "Value must be between {{min}} and {{max}}", {
    min: 0,
    max: 20,
  });
}
</>
)

Jest test file

render(<InputComp />);
expect(
  screen.getByText(new RegExp(`value must be between 0 and 20`, "i")),
).toBeInTheDocument();

My .json

{
  "validationInputError": "Value must be between {{min}} and {{max}}",
}

Test is failing. Following is debug log I get from jest.

<label class="cds--label cds--label--no-margin invalidInputError">
  Value must be between {{ min }} and 20
</label>;

value of max is getting interpolated but not of min. Very weird !!!

If I remove the variables from translation and hardcode the values of min and max, the test passes successfully.

My InputComp.tsx component renders correctly in browser, i.e it shows the error message correctly in browser e.g value must be between 0 and 20 is rendered on the browser.

Expected behavior

Variables should get interpolated when testing with jest. In the above case test should pass and the screen.debug() should display

<label class="cds--label cds--label--no-margin invalidInputError">
  Value must be between 0 and 20
</label>;

and not {{min}}

Your Environment

• runtime version: i.e. node v18.80
• i18next version: 21.10.0
• os: Windows
• any other relevant information
• jest: 29.7.0

[adrai]

Can you create a minimal reproducible example repository?