Add docs for vue-test-utils

Description

It looks like our current docs are quite out of date in the way they describe our preferred approach to testing Vue components.

So what is our preferred approach?

Here's some good examples:

1. Use @vue/test-utils

We prefer using shallowMount because the unit tests are isolated and faster. We must pass sync: false to the shallowMount or mount call because sync mode is going away and has some flakiness around it.

2. In Karma there's some extra things needed

For one, all new specs need to be written in Jest, but for any preexisting Karma specs using @vue/test-utils, it's important that the calls to mount and shallowMount have some extra decorations, otherwise it causes unrelated non-deterministic errors.

What do you mean... extra decorations?

In Karma land... this will cause unrelated errors because @vue/test-utils leaves behinds some artifacts 😞

import { shallowMount } from '@vue/test-utils';
import Foo from '~/foo';

describe('foo', () => {
  let wrapper;

  const createComponent = (props = {}) => {
    // Bad :(
    wrapper = shallowMount(Foo, { 
      propsData: props
    });
  };

  // ...
});

For some reason, adding a localVue, extending the component, and sync: false are known to prevent these non-deterministic errors.

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Foo from '~/foo';

describe('foo', () => {
  let wrapper;

  // Note that only one call to createLocalVue is needed per spec
  const localVue = createLocalVue();
  const createComponent = (props = {}) => {
    // Good :)
    wrapper = shallowMount(localVue.extend(Foo), { 
      propsData: props,
      sync: false,
      localVue,
    });
  };

  // ...
});
Edited by Chad Woolley