Question

使用Vue服务进行测试时，我真的很困惑。我的测试问题与vue，vuetify，vuex，vuei18n有关。

我将在这里总结我的设置测试（我也注意到其中的失败步骤）：

import Vue from "vue";
import Vuetify from "vuetify";
import VueI18n from "vue-i18n";
import store from "@/store/index";
import Login from "@/views/Login.vue";
...

beforeEach(() => {
  Vue.use(Vuetify);
  Vue.use(VueI18n);
  i18n = new VueI18n({
    messages: { fr, en, vi }
  });
  Constructor = Vue.extend(Login);
});

describe("Login.vue", () => {
...
test("should translate helper message when failing in login", () => {
    i18n.locale = "en";
    vm = new Constructor({ store, i18n }).$mount();

    vm.$el.querySelector("input[type='email']").value = "incorrect user";
    vm.$el.querySelector("input[type='password']").value = "incorrect password";
    vm.$el.querySelector("button[type='submit']").click();

    const message = vm.$el.querySelector(".v-snack__content").textContent;

    console.log(111, message); <-- I can't get any string here
    expect(message).toEqual("Login error, please retry");
  });
}

我单击的按钮运行此功能

** Login.vue

<template>
...
  <v-btn type="submit" :disabled="logMeIn || !valid" :loading="logMeIn" @click="login">{{$t("Login")}}</v-btn>
...
</template>

<script>
methods: {
  login: async function() {
    ...
    } catch (e) {
      this.$store.dispatch("ui/displaySnackbar", {
        message: this.$i18n.t("Login error, please retry")
      });
    ...
  }
}
</script>

我们使用Vuex渲染此组件：

** Snackbar.vue

<template>
  <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout">
    {{ snackbar.message }}
    <v-btn dark flat @click="snackbar.show = false">{{ $t("Close") }}</v-btn>
  </v-snackbar>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Snackbar",
  computed: {
    ...mapState("ui", ["snackbar"])
  }
};
</script>

我的问题是：为什么vm.$el.querySelector无法访问 Snackbar.vue。我需要它来测试其中的一些文本

Answer 1

它还没有完成异步登录，我的猜测是在这里。测试是否已调用登录名，并在其自己的单元中测试login方法-目前，这是一种测试login方法的怪异方法。

例如：

describe("clicked submit", function clickedSubmit(){

  it("should call vm.login", function(){
   ...
   expect(vm.login).toBeCalledTimes(1)
   expect(vm.login).toBeCalledWith("args")
  })

})

describe("vm.login", function(){

    describe("called with invalid userdata & invalid pass", function(){

      it("should invalidate", async function(){

        await vm.login(...args)  
        await vm.$nextTick()
        ...
        expect(vm.message).toBe("target value")
        //expect(vm.$el...)
      })
    })
  })

Vue测试组件：无法从小吃栏中选择元素

1 个答案: