Vue.js testing - Renders error message TypeError: $setup.t is not a function

Question

I use Vue.js 3, setup syntax, typescript and vue-i18n. For the testing I use vitest and Vue Testing Library. I try to mock i18n's t function, but looks like component doesn't see it. How can I solve this?

My test:

import { describe, test, expect } from "vitest";
import { render } from "@testing-library/vue";

import TheError from "@/components/TheError.vue";

describe("TheError", () => {
  test("Renders error message", () => {
    const message = "Something went wrong!";
    const t = (msg: string): string => msg;

    const wrapper = render(TheError, {
      props: { message },
      global: {
        mocks: { t },
      },
    });

    const errorMessage = wrapper.getByText(message);
    expect(errorMessage.textContent).toBe(message);
  });
});

The error I'm getting:

src/components/tests/TheError.test.ts > TheError > Renders error message
TypeError: $setup.t is not a function

Yes, but if it were options api, I access t via vue-i18n composable. And I've tried to declare it as $t in the test, it doesn't work either. — Explicit
– Explicit, Commented Mar 1, 2023 at 18:15
If you work with composables, mocks will not work like this. You need to mock the imports — Leif Marcus
– Leif Marcus, Commented Mar 1, 2023 at 18:52
How can I do this or where can I read about this? I don't see anything in vue testing library docs. — Explicit
– Explicit, Commented Mar 1, 2023 at 18:57
Okay, I've mocked it with vi.mock, but how can I pass it to component now? — Explicit
– Explicit, Commented Mar 1, 2023 at 21:53

Explicit · Accepted Answer · 2023-03-03 19:43:49Z

-2

vi.mock("vue-i18n", () => ({
  useI18n: () => ({ t: (key: string) => key }),
}));

answered Mar 3, 2023 at 19:43

Explicit

4491 gold badge4 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Caney Over a year ago

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?

Collectives™ on Stack Overflow

Vue.js testing - Renders error message TypeError: $setup.t is not a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related