在Vue.js中沿着i18 n使用jest

neekobn8  于 11个月前  发布在  Jest
关注(0)|答案(1)|浏览(163)
  • 谢谢你看我的问题(初级开发人员疯了)。*

最近我在Vuejs(comp. API)应用中添加了i18 n来进行翻译,它可以正常工作。但是,在推送后,我意识到jest suit broke。通过在package.json中添加"^vuetify$": "<rootDir>/node_modules/vuetify/dist/vuetify.js"到我的jest配置中来修复原始解析错误。
然而,在那之后,这个错误出现了,折磨了我好几天...>:(
● DudDialog.vue ›测试状态更新›正确显示表单字段TypeError:_ctx.$t不是函数.

如何让i18 n在jest-test中工作?我研究了编译i18 n,但只找到了使用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);
    });
  });
});

字符串

omvjsjqw

omvjsjqw1#

将i18n添加到mount()中的插件中解决了这个问题。️🤦‍

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,
      },
    });

字符串

相关问题