Async Jasmine unit test wrong order

I have a onBlur function which gets executed when the blur on an input is activated. Inside this async onBlur function I await the response from another function. When I try to test this the order of execution seems wrong. I've put in three console.logs() to inspect the order of execution which seems to be incorrect.

What is causing this order to go wrong? Wouldn't nextTick() ensure that the async functions need to be finished before the test is concluded?

it('executes startDate when blur is triggered on search', async function(done) {
      // GIVEN an instantiated SearchDate
      // WHEN validateStartDate is spied upon and blur is triggered
      const spyValidateStartDate = spyOn(SearchDate.methods, 'validateStartDate').and.callThrough();

      wrapper = shallowMount(
        Search,
        {
          localVue: this.localVue,
          propsData: props,
        },
      );

      const searchStartDateElement = wrapper.find('#searchStartDate');
      searchStartDateElement.element.value = '01-01-2018';
      await searchStartDateElement.trigger('blur');

      // THEN expect datepickerStartDate to have the correct date
      wrapper.vm.$nextTick(() => {
        expect(spyValidateStartDate).toHaveBeenCalled();
        console.log('3');
        expect(wrapper.vm._data.datepickerStartDate).toEqual(new Date('2018-01-01'));
        done();
      });
    });

And the blur function in Vue

async onBlur(event) {
      console.log('1');
      this.datepickerStartDate = await this.validateDateField(event.target.getAttribute('name'), event.target.value);
      console.log('2');
    },

The current order of the console.log() is 1, 3, 2

validateDateField function

    async validateDateField(name, value) {
      const valid = await this.$validator.validate(name);
      if (!valid || !value) {
        return null;
      }

      const splittedInput = value.split('-');
      return new Date(`${ splittedInput[2] }-${ splittedInput[1] }-${ splittedInput[0] }`);
    },
Updated 2022-01-14 10:13:44Z by
Updated 2022-01-14 08:06:36Z by Pimmesz

May be someone more experienced in Vue could explain this better. But could you try if any of these work —

      await wrapper.vm.$nextTick();
      expect(spyValidateStartDate).toHaveBeenCalled();
      console.log('3');
      expect(wrapper.vm._data.datepickerStartDate).toEqual(new Date('2018-01-01'));
      done();

or

      wrapper.vm.$nextTick().then(() => {
        expect(spyValidateStartDate).toHaveBeenCalled();
        console.log('3');
        expect(wrapper.vm._data.datepickerStartDate).toEqual(new Date('2018-01-01'));
        done();
      });

If so I assumes that the nextTick's callback is being passed to microtask job queue which executes before the normal async callback queue. If not, then may be it is taking more than one tick for the blur event handler to get called.

Updated 2022-01-14 09:47:22Z by LOhivi