lmiller1990 / vue-testing-handbook

A guide on testing Vue components and applications
https://lmiller1990.github.io/vue-testing-handbook/
876 stars 160 forks source link

Vue 3 update #145

Closed lmiller1990 closed 4 years ago

lmiller1990 commented 4 years ago

So I think we should update all the guides for Vue 3. Basically nothing needs to change, but we should also look for common patterns emerging for Vue 3 (composition api?)

Also VTU will likely change for Vue 3 as well - will need to consider this. I think we will need to maintain two versions of the boo, Vue 3 and Vue 3 - after a few months of Vue 3 in the wild, Vue 2 guides will be in maintenance mode.

webistomin commented 4 years ago

Do you know the approximate release date? 😊

lmiller1990 commented 4 years ago

Probably sometime in the next month. VTU next works pretty well, the majority of these examples will remain unchanged.

The main updates will be adding some additional examples for composition API users, and probably some TypeScript examples, since that is getting pretty popular now.

lmiller1990 commented 4 years ago

Turns out I had to build VTU v2 before I updated these, so it took a while. Anyway, I finally got VTU v2 into beta and had some time so I added Vue 3 support to this book. I added it under a locale called v3. https://lmiller1990.github.io/vue-testing-handbook/v3/

I am not sure how this will work for translations.

The actual changes were very minimal. There are hardly any breaking changes between VTU v1 and v2. I am working on documenting them now.

The easiest way for translators to update their docs would be to do a diff between the English docs in src and their v3 counterpart in src/v3. For example diff src/v3/README.md src/README.md shows me what's changed on the first page.

In addition to this book I've been working on the VTU v2 docs as well. Those are here https://vuejs.github.io/vue-test-utils-next-docs/api/. The main differences in VTU V1 and V2 are:

// Vue 2:

Vue.use(Vuex)
new Vue({ store })

// Vue 3

const app = createApp(App)
app.use(store)

VTU now does this:

// VTU v1
const localVue = createLocalVue
mount({
  store,
  localVue
})

// VTU v2
mount({
  global: {
    plugins: [store]
  }
})

Docs are here for the full API: https://vuejs.github.io/vue-test-utils-next-docs/api/

The other main change is propsData is now props. We will support both for back compat but I'd rather use props everywhere, since that's what you use when you declare props in a component.