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

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

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>