测试在该表单上使用 veevalidate 的表单答案

【问题标题】：Test a form which used veevalidate on that form测试在该表单上使用 veevalidate 的表单
【发布时间】：2019-11-18 14:02:16
【问题描述】：

我使用 vee-validate 3.0.11 版来验证我的表单，如下所示

           <validation-observer v-slot="{ invalid }" slim>

              <validation-provider rules="required" v-slot="{ errors, dirty, invalid}" slim>
                <div class="form-group">
                  <label class="sr-only" for="txtUsername"></label>
                  <input
                    autocomplete="off"
                    id="txtUsername"
                    name="username"
                    type="text"
                    class="form-control txtUsername"
                    placeholder="Email or Username"
                    v-model="username"
                    v-bind:class="{ 'is-invalid': invalid && dirty,'is-valid': !invalid }" />


                </div>
              </validation-provider>
              <validation-provider rules="required" v-slot="{ errors, dirty, invalid}" slim>
                <div class="form-group">
                  <label class="sr-only" for="txtPassword"></label>
                  <input
                    id="txtPassword"
                    name="password"
                    type="password"
                    class="form-control"
                    placeholder="Password"
                    v-model="password"
                    v-bind:class="{ 'is-invalid': invalid && dirty,'is-valid': !invalid }" />

                </div>
              </validation-provider>

              <div >
                <button
                  type="button"
                  name="login"
                  class="btn btn-primary"
                  v-on:click="doLogin()"
                  :disabled="invalid">
                  Login
                </button>
              </div>
            </validation-observer>

我用 chai 和 mocha 写了一些测试在我的测试中，我需要找到按钮但是当我使用 find 方法查找按钮时，validation-observer 标记之间的所有 html 标记都没有加载到我的包装器中。我的测试代码是：

// i change it to shallowMount to mount but problem is exist, 
// mount does not render any thing between validation-observer tag
const wrapper = mount(LoginView, { sync: false });

describe('Login.vue', () => {
    it('some text, () => {
        console.log(wrapper.html());
        // my log include all of tag except tags between the validation-observer tag
    });
});

有人可以告诉我如何使用warraper.find() 找到我的按钮吗？

【问题讨论】：

可能是因为您使用的是shallowMount 而不是mount，所以您应该始终使用mount，因为它会以测试运行时间为代价提供更可靠的输出。
@logaretm 我也尝试过mount，但它仍然无法呈现validation observer 标签之间的html
在你挂载后立即尝试使用flush-promises，因为渲染是异步的，你可以在 GitHub 上查看 vee-validate 测试。
我也遇到过类似的问题。使用 mount 代替 shallowMount 解决了这个问题

标签： vue.js mocha.js chai vee-validate

【解决方案1】：

您正在尝试对需要安装的组件进行浅层安装以便render its children。如果您想完全忽略ValidationProvider，您可以提供一个假的，如下所示。

ContactForm.vue

<template>
  <div>
    <ValidationProvider rules="required" name="input" v-slot="{ errors }">
      <p :style="{color: 'red'}">To be, or not to be</p>
      <input type="text" v-model="value">
      <span id="error">{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>

<script>
import { ValidationProvider } from "vee-validate";

export default {
  name: "ContactForm",
  components: {
    ValidationProvider
  },
  data: () => ({
    value: ""
  })
};
</script>

ContactForm.test.js

import { shallowMount, createLocalVue } from "@vue/test-utils";
import ContactForm from "./ContactForm";
import FakeValidationProvider from "./FakeValidationProvider";

test("Test shallow mount renders what's inside validation provider", async () => {
  const localVue = createLocalVue();

  var wrapper = shallowMount(ContactForm, {
    stubs: {
      ValidationProvider: FakeValidationProvider
    },
    localVue
  });

  expect(wrapper.text()).toContain("To be, or not to be");
});

FakeValidationProvider.vue

<template>
  <div v-bind="{ ...$props, ...$attrs }">
    <slot :errors="errors"></slot>
  </div>
</template>

<script>
export default {
  name: "FakeValidationProvider",
  data() {
    return {
      errors: []
    };
  }
};
</script>

您可以随意使用除错误之外的任何其他参数来扩展槽。如果您也想让这些参数动态化，请查看this article on rendering slots

【讨论】：