NuxtJS ，带有 Jest 和 nuxt-i18n 的单元测试语言选择器答案

【问题标题】：NuxtJS , Unit Test language picker with Jest and nuxt-i18nNuxtJS ，带有 Jest 和 nuxt-i18n 的单元测试语言选择器
【发布时间】：2019-09-01 22:49:53
【问题描述】：

我有一个使用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");

【问题讨论】：

标签： unit-testing jestjs nuxt.js

【解决方案1】：

确保您的查找选择器是正确的。

const comp = cmp.find(".navbar-item");
comp.trigger('click');

您可以使用 chrome 开发工具选择器实用程序。详细信息请参考this链接。

【讨论】：