在 Vue.js 中使用 i18n 笑话

Question

感谢您查看我的问题（初级开发人员快疯了）。

最近我将 i18n 添加到我的 Vuejs（comp. API）应用程序中进行翻译，效果完美。然而，推开之后，我发现jest套装破了。通过添加修复了原始解析错误

"^vuetify$": "<rootDir>/node_modules/vuetify/dist/vuetify.js"

到 package.json 中我的笑话配置。

然而之后，这个错误又出现了，折磨了我好几天... >:(

● DudDialog.vue › 测试状态更新 › 正确显示表单字段 类型错误：_ctx.$t 不是函数 ...还有很多，但这一个^似乎是核心问题...

如何让 i18n 在 jest-test 中工作？我研究了 stubbing i18n，但只找到了使用 vitest 或 React 的解决方案。 （我无法适应）我该如何正确地做到这一点？

请救救我！心理健康状况正在恶化：{

//DudDialog.spec.js
import { config, mount } from "@vue/test-utils";
import DudDialog from "@/components/DudsView/DudDialog.vue";
import { createPinia, setActivePinia } from "pinia";
import { Dud } from "@/store/dudClass";
import { DIALOG_STATES } from "@/miscellaneous/constants";
import { translations } from "@/miscellaneous/translations";

describe("DudDialog.vue", () => {
  let component;
  const pinia = createPinia();
  let dudProp;

  beforeEach(async () => {
    setActivePinia(pinia);
    mountDudDialog();
  });

  function mountDudDialog() {
    component = mount(DudDialog, {
      global: {
        stubs: [
          "v-app",
          "v-main",
          "v-dialog",
          "v-row",
          "v-card",
          "v-toolbar",
          "v-text-field",
          "v-select",
          "v-textarea",
          "v-col",
          "v-form",
          "v-btn",
          "v-card-actions",
        ],
        plugins: [pinia],
      },
      props: {
        dud: dudProp,
      },
    });
  }

  beforeAll(() => {
    config.global.renderStubDefaultSlot = true;
  });

  afterAll(() => {
    config.global.renderStubDefaultSlot = false;
  });

  it("renders component", () => {
    expect(component.html()).toMatchSnapshot();
  });

  describe("Test state create", () => {
    beforeEach(async () => {
      dudProp = new Dud("TheDud");
      mountDudDialog();
      component.vm.openDudDialog(DIALOG_STATES.CREATE);
      await component.vm.$nextTick();
    });

    it("displays correct title", () => {
      const titleElement = component.find(".dialogToolbar");
      expect(titleElement.attributes().title).toContain(
        "Neuen Blindgänger erfassen"
      );
    });

    it("displays the form fields correctly", () => {
      const typeField = component.find("[label='Typ']");
      expect(typeField.exists()).toBe(true);
      expect(typeField.element.__vnode.props.modelValue).toBe(undefined);
    });

    it("displays correct buttons", () => {
      const createButton = component.find(".createButton");
      const dismissButton = component.find(".dismissButton");
      const saveButton = component.find(".saveButton");
      const okButton = component.find(".okButton");
      expect(createButton.exists()).toBe(true);
      expect(dismissButton.exists()).toBe(true);
      expect(saveButton.exists()).toBe(false);
      expect(okButton.exists()).toBe(false);
      /*
      const createFunction = jest.spyOn(component.vm, "onClickCreateDud");
      createButton.trigger("click");
      expect(createFunction).toHaveBeenCalled();*/
    });
  });

  describe("Test state read", () => {
    beforeEach(async () => {
      dudProp = new Dud(0, "TheDud");
      mountDudDialog();
      component.vm.openDudDialog(DIALOG_STATES.READ);
      await component.vm.$nextTick();
    });

    it("displays correct title", () => {
      const titleElement = component.find(".dialogToolbar");
      expect(titleElement.attributes().title).toContain("TheDud");
    });

    it("displays the form fields correctly", () => {
      const typeField = component.find("[label='Name']");
      expect(typeField.exists()).toBe(true);
      expect(typeField.element.__vnode.props.modelValue).toBe("TheDud");
    });

    it("displays correct buttons", () => {
      const createButton = component.find(".createButton");
      const dismissButton = component.find(".dismissButton");
      const saveButton = component.find(".saveButton");
      const okButton = component.find(".okButton");
      expect(createButton.exists()).toBe(false);
      expect(dismissButton.exists()).toBe(false);
      expect(saveButton.exists()).toBe(false);
      expect(okButton.exists()).toBe(true);
    });
  });

  describe("Test state update", () => {
    beforeEach(async () => {
      dudProp = new Dud(0, "TheDud");
      mountDudDialog();
      component.vm.openDudDialog(DIALOG_STATES.UPDATE);
      await component.vm.$nextTick();
    });

    it("displays correct title", () => {
      const titleElement = component.find(".dialogToolbar");
      expect(titleElement.attributes().title).toContain("TheDud bearbeiten");
    });

    it("displays the form fields correctly", () => {
      const typeField = component.find("[label='Name']");
      expect(typeField.exists()).toBe(true);
      expect(typeField.element.__vnode.props.modelValue).toBe("TheDud");
    });

    it("displays correct buttons", () => {
      const createButton = component.find(".createButton");
      const dismissButton = component.find(".dismissButton");
      const saveButton = component.find(".saveButton");
      const okButton = component.find(".okButton");
      expect(createButton.exists()).toBe(false);
      expect(dismissButton.exists()).toBe(true);
      expect(saveButton.exists()).toBe(true);
      expect(okButton.exists()).toBe(false);
    });
  });
});

Answer 1

在 mount() 的插件中添加 i18n 修复了这个问题。🤦u200d♀️

mount(DudDialog, {
      global: {
        stubs: [
          "v-app",
          "v-main",
          "v-dialog",
          "v-row",
          "v-card",
          "v-toolbar",
          "v-text-field",
          "v-select",
          "v-textarea",
          "v-col",
          "v-form",
          "v-btn",
          "v-card-actions",
        ],
        plugins: [pinia, i18n],
      },
      props: {
        dud: dudProp,
      },
    });