Question

我是 Jest 的新手，我正在尝试模拟存储、一个动作并断言该方法确实被调用了。基本上我想检查登录功能。

我无法查询按钮，因为我只检索了组件的一部分，我不知道缺少什么。

我的 Vue 组件看起来像：

<块引用>

<ValidationObserver id="observer" v-slot="{ invalid }" :class="['w-full h-full']">
  <form class="flex flex-col justify-around h-full" @submit.prevent="onSubmit">
    <ValidationProvider v-slot="{ errors }" name="accessCode" :class="['w-full py-6']">
      <sd-field :class="['sd-field_secondary', { ['sd-invalid ']: errors && errors.length > 0 }]">
        <label for="email">{{ $t("form.access-code") }}</label>
        <sd-input v-model="accessCode" type="accessCode" />
        <span class="sd-error">{{ errors[0] }}</span>
      </sd-field>
    </ValidationProvider>

    <div class="btn-group-y">
      <button class="btn btn-fixed btn-blueDark" type="submit">
        <span>{{ $t("account.login") }}</span>
      </button>
      <!-- <button class="btn btn-link" type=""> //TODO: temporary hide
        <span>{{ $t("account.forgot_id") }}</span>
      </button> -->
    </div>
  </form>
</ValidationObserver>

 ***MY TEST FILE***
import login from "../../pages/index/login";
import Vuex from "vuex";
import { mount, createLocalVue } from "@vue/test-utils";
const localVue = createLocalVue();
localVue.use(Vuex);

describe("Login form", () => {
  it("calls the login action correctly", () => {
    const loginMock = jest.fn(() => Promise.resolve());
    const store = new Vuex.Store({
      actions: {
        onSubmit: loginMock,
      },
    });
    const wrapper = mount(login, { localVue, store, stubs: { ValidationObserver: true } });
    console.log(wrapper.html());
   // wrapper.find("button").trigger("click");
  // expect(loginMock).toHaveBeenCalled();
  });
});

console.log(wrapper.html()) 只返回组件的一部分

<块引用>

 <div class="h-full w-full"><validationobserver id="observer"
    class="w-full h-full"> </validationobserver> 
  </div>

也有警告：

> console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
>         [Vue warn]: Unknown custom element: <ValidationObserver> - did you register the 
>         component correctly? For recursive components, make sure to provide the "name" option.  
>         found in
>        ---> <Anonymous>
>            <Root>

我想了解这是如何工作的，我尝试了存根和其他方法，但没有成功。我可以通过添加存根来消除警告：{ ValidationObserver: true } 挂载但我实际上需要访问里面的元素。谢谢！

单元测试登录 Vue Jest ValidationProvider

0 个答案: