我有一个组件,可以使用nuxt-i18n
切换nuxtjs应用程序的语言,如下所示
<template>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link langpicker">{{ $t("language_picker") }} </a>
<div class="navbar-dropdown is-hidden-mobile">
<div>
<nuxt-link
v-if="currentLanguage != 'en'"
class="navbar-item"
:to="switchLocalePath('en')"
>
<img src="~/static/flags/us.svg" class="flagIcon" /> English
</nuxt-link>
<nuxt-link
v-if="currentLanguage != 'el'"
class="navbar-item"
:to="switchLocalePath('el')"
>
<img src="~/static/flags/el.svg" class="flagIcon" /> Ελληνικά
</nuxt-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "LangPicker",
computed: {
currentLanguage() {
return this.$i18n.locale || "en";
}
}
};
</script>
我想编写一个单元测试,以测试单击"nuxt-link"时正确的语言切换。
到目前为止,我有以下内容
import { mount, RouterLinkStub } from "@vue/test-utils";
import LangPicker from "@/components/layout/LangPicker";
describe("LangPicker with locale en", () => {
let cmp;
beforeEach(() => {
cmp = mount(LangPicker, {
mocks: {
$t: msg => msg,
$i18n: { locale: "en" },
switchLocalePath: msg => msg
},
stubs: {
NuxtLink: RouterLinkStub
}
});
});
it("Trigger language", () => {
const el = cmp.findAll(".navbar-item")
});
});
cmp.find(".navbar-item")
返回一个空对象。
我不知道必须如何设置才能"触发"点击事件。
const el = cmp.findAll(".navbar-item")[1].trigger("click");
请确保您的查找选择器正确。
const comp = cmp.find(".navbar-item");
comp.trigger('click');
您可以使用Chrome开发工具选择器实用程序。有关详细信息,请参阅此链接。