- 谢谢你看我的问题(初级开发人员疯了)。*
最近我在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);
});
});
});
字符串
1条答案
按热度按时间omvjsjqw1#
将i18n添加到mount()中的插件中解决了这个问题。️🤦
字符串