Jest testing with actual translated text (jest, i18next)

[brightpixels]

Hello,
I have the following basic buttoncomponent test:

Button.spec.tsx

import { Button } from "../../../app/components/Button";
import { useTranslation } from "react-i18next";
import { render, screen } from "@testing-library/react";

describe("Button Component", () => {
  it("Should render with correct label", () => {
    render(<Button>Click here</Button>);
    const { t } = useTranslation("common");
    const ButtonElment = screen.getByText(t("commonButtonLabel"));
    expect(ButtonElment).toHaveTextContent("Click here");
  });
});

I am getting the error:

 Expected element to have text content:
      Click here
    Received:
      commonButtonLabel

Part of the problem is that I am mocking the t function which simply returns the translation key in jest.setup.js

jest.mock("react-i18next", () => ({
  // this mock makes sure any components using the translate hook can use it without a warning being shown
  useTranslation: () => ({
    t: (str) => str,
  }),
}));

Reason for mocking the t function was to get around the error: console.warn react-i18next:: You will need to pass in an i18next instance by using initReactI18next

If I modify my test like this, it will pase:
expect(ButtonElment).toHaveTextContent("commonButtonLabel");

I want to be able to test with the actual translated text. Are there any examples of how to do this.