Question

我使用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编写了一些测试在我的测试中，我需要找到按钮但是，当我使用查找按钮的查找方法时，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（）找到我的按钮吗？

Answer 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

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

1 个答案: