Set values with vee-validate does not work?

[dmitry-saritasa]

Version

vue-test-utils: 1.0.0-beta.12
vee-validate: 2.1.0-beta6

Reproduction link

https://codesandbox.io/s/qqml72wz04
See components/LoginUser.test.js

the URL of the form
https://qqml72wz04.codesandbox.io/login

My test is failing because I can't set the vee-validate field value wrapped in custom component, however
the form is working in the browser, but jest says NO errors.

Steps to reproduce

/**
 * Tests for Login User Component
 */
describe('src/apps/auth/components/login-user', () => {
  let actions;
  let getters;
  let store;
  let wrapper;


  /**
   * Data used across all the tests below, we mock the vuex store
   * as well as few vuex getters
   */
  beforeEach(() => {
    actions = {
      [types.AUTH_LOGIN]: jest.fn(),
    };

    getters = {
      isAuthenticated: () => false,
      authUser:        () => {},
    };

    store = new Vuex.Store({
      state: {},
      actions,
      getters,
    });

    wrapper = shallow(LoginUser, {
      localVue,
      store,
      router,
      stubs: {
        FormTextInput: '<input type="text" />',
        RouterLink:    RouterLinkStub,
      },
    });
  });


  /**
   * Check that email and passwords are required fields and if we don't supply
   * them - we get errors
   */
  it('email and password are required fields', async () => {
    wrapper.find('button').trigger('click');
    await flushPromises();
    expect(wrapper.vm.errors.count()).toBe(2);
  });

  /**
   * Check that we dispatch the AUTH_LOGIN vuex action when we click on
   * login button of the form
   */
  it(`dispatches ${types.AUTH_LOGIN} when submitted`, async () => {
    wrapper.find('input[name=email]').element.value = 'test@test.com';
    wrapper.find('input[name=password]').element.value = 'test';
    wrapper.find('button').trigger('click');
    await flushPromises();

    // console.log(wrapper.find('input[type="password"]').element);
    // console.log(wrapper.vm.errors.all(), wrapper.vm.$validator.fields);
    console.log(wrapper.vm.errors.all());
    expect(actions[types.AUTH_LOGIN]).toHaveBeenCalled();
  });
});

What is expected?

All tests should pass.

What is actually happening?

Tests failed

---

If i change the code this way

/**
   * Check that we dispatch the AUTH_LOGIN vuex action when we click on
   * login button of the form
   */
  it(`dispatches ${types.AUTH_LOGIN} when submitted`, async () => {
    wrapper.setData({
      email: 'test@test.com',
      password: 'test',
    });
    wrapper.find('button').trigger('click');
    await flushPromises();

    // console.log(wrapper.find('input[type="password"]').element);
    // console.log(wrapper.vm.errors.all(), wrapper.vm.$validator.fields);
    // console.log(wrapper.vm.errors.all());
    expect(actions[types.AUTH_LOGIN]).toHaveBeenCalled();
  });

then my second test is working. So how to properly assign values to fields defined by custom components?

[38elements]

I think this is related below.
logaretm/vee-validate#1267

[lmiller1990]

I noticed if you use mount instead of shallow one of the tests will pass. Maybe when vue-test-utils stubs the children out (which shallow does by default) it causes the validator to disappear as well.

[eddyerburgh]

@lmiller1990 is correct.

You're using shallowMount which stubs child components, so the base-input component doesn't render an input for v-validate to bind to. You need to use mount, or provide stubs that render input fields so that v-validate binds correctly.