search

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

Question: How is store used in create warapper? #160

Closed shortpoet closed 4 years ago

shortpoet commented 4 years ago

Thank you for the excellent guide, it's been instrumental in learning how to test! :)

I'm wondering about passing the vuex store as an option to the mount functions. I can't seem to find where it's documented in the official vue-test-utils docs. Those only mention a context object being used solely for functional components. I dug through the source code as much as I could (mostly using find) to look for instances of the options to try and track down how store is converted to context.

I would have posted on the test utils gh, but figured since I got the idea here, and it seems you may have answered on there anyway... My test works, took a while to figure out how to modify the store using a create mocks function, partially from your guide, partially from an idea I got from markus oberlehner and implemented in store and test. Passing the custom mocks through to the store stopped errors from appearing in console and I think I understand why. Just looking to further my understanding in any way.

I really appreciate the thought exercises you left, and you mentioned contributing to the guide. While I'm mostly a noob, I am eager to help in any way. If you think this factory function to create mock stores would be a useful contib I would be happy to help implement it in the docs. Also, there's an open issue for Spanish translation. I have worked as a translator in the past. Always did my work manually (w/o MT) and have been looking forward to applying newly learned tech skills in that arena. To start with, I want to be able to at least have my own site translated hehe. I kinda wanted to make the purchase of some MT software and start playing with that. I understand the translation is on hold owing to the release of composition api. I wouldn't be able to look into the translations anyway until my testing phase is complete. Also would be kinda fun to try and do a collab translation but understand if that project is "fully staffed."

Thanks again! Carlos

p.s. I look forward to the day I will apply markdown url syntax correctly in the first attempt XD

lmiller1990 commented 4 years ago

Hi.

The store can be passed to the mounting options - you can pass anything you would pass to `new Vue({}). It is mentioned in the tip at the start of this page..

Aside from the options documented below, the options object can contain any option that would be valid in a call to new Vue ({ /options here/ }). These options will be merged with the component's existing options when mounted with mount / shallowMount

When you create a new Vue app with new Vue, you would do something like

new Vue({
  store: store,
  router: router
  // ...
})

So that's why you can pass it.

Regarding translations, your credentials are impressive 👍

I'm not sure exactly how the translators are collaborating. I don't think there is any such concept of "translation staff" for a resource like this - just s bunch of motivated developers who happened to know multiple languages. If you are interested, you can just post in that issue and see where everyone is at :) new contributors is always a good thing.

It's really exciting to know people find my content useful enough to translate it!

Regarding the factory function, we do mention it here. I may add a separate section about this in the future. I'll make an issue if I decide to do this. I'm definitely interested getting more perspectives. :)

If you want more content, especially for Vue 3, another resource is this website. You can find the first seven lectures for my new course here, and I also make weekly screencasts relating to Vue testing and general design patterns.

shortpoet commented 4 years ago

Thank you very much for the detailed response! I look forward to that course as soon I'm done with this testing for my resume site. Coverage starting to look greener :)