Vitest + remix-i18next

[depsimon]

Is there a way to use remix-i18next in Vitest?

I'm currently using the following test:

import { createRemixStub } from "@remix-run/testing";
import { render, screen, waitFor } from "@testing-library/react";
import { describe, test } from "vitest";
import Index from "../../app/routes/_index";

describe("IndexPage", () => {
  test("renders page", async () => {
    const RemixStub = createRemixStub([
      {
        path: "/",
        Component: Index,
      },
    ]);

    render(
      <RemixStub
        hydrationData={{
          loaderData: { root: { locale: "fr" } },
        }}
      />,
    );

    await waitFor(() => screen.findByText("Bienvenue sur Remix"));
  });
});

It fails because the translation is not loaded and therefore renders the translation key instead.

[sergiodxa]

You can set i18next in cimode, https://www.i18next.com/how-to/faq#how-to-handle-with-changes-in-e2e-tests, that will return the key instead of the text, so you don't have to test against a specific language.

Another option is that you set i18next in your tests to load the translations, you could use the resources option in i18next to add pre-bundled translations so you don't have to use a backend.

[depsimon]

I didn't know of cimode, I went with the resources translations but I think testing the keys might be better.

Thank you