Open nlochschmidt opened 5 years ago
We have a mixed ts/js project and we only recently started to write unit tests in ts (before that we had some in js). All tests are written using mocha/chai and run through mocha-webpack.
What I've found is that mocks, stubs, and other shallowMount/mount options seem to be ignored if I write my tests in typescript, but not if I write them in javascript, even if the components themselves are written in typescript. I still haven't found a way to make the options work in typescript tests, so for now we're reverting to writing only components in typescript, and their unit tests in javascript.
There is another strange behaviour, this time when using the --watch
option: if a component uses a method injected by a plugin (in our case it's a method called $translate
, you can guess what it does), the first run of the test will work even if the method wasn't defined, but as soon as the test reruns in the same --watch
session, there is an error in the console about this method not being defined.
Version
1.0.0-beta.29
Reproduction link
https://github.com/nlochschmidt/vue-router-test-utils-bug
Steps to reproduce
I attempted to test the properties that are passed to a component that is created by my router. I was following the examples from the docs but didn't want to fully mount the component in question because of it's behaviour on mounting, etc.
Here are the relevant parts from the repository linked above:
router.ts
Home.vue
router.spec.ts
What is expected?
Since
Home
should be stubbed, the child componentHelloWorld
, shouldn't get mounted and shouldn't exist when checkingwrapper.find(HelloWorld).exists()
What is actually happening?
The
stubs
configuration is ignored and theHome
component actually gets created and mounted.I would also be interested in knowing how else I can check that the correct props are provided to a component without actually creating that component.