Looking for examples of unit testing vueify components

[jblotus]

Hi there,

I am trying to mock some dependencies for testing purposes. Usually I use proxyquireify for this purpose and that works well.

However when processing a .vue file containing template, style and the code itself the stubbing process does not seem to do anything.

Now, I am using several other plugins, babel, etc so I'm just wondering if anyone has gotten this to work.

I did find a tweet from Vue that mentioned this exact situation but the repo is now gone: https://twitter.com/vuejs/status/680988998274269185

//in MyComponent.vue
<script>
import Dependency from 'some-dep';
console.log(Dependency); //shows original non-mocked version

export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

//in test file
const SomeDep= jasmine.createSpyObj('SomeDep', ['someMethod']);

testObj = proxyquire('MyComponent.vue', {
  'some-dep': SomeDep
});

console.log(testObj) //shows component

Now in the test. the component itself seems to load just fine but with the actual dependencies. Maybe proxyquireify is not compatible with vueify? Would appreciate some guidance.

[openback]

@jblotus Have you found anything on this subject yet? I'd like to use vueify, but testing looks lie it could be somewhat problematic.

[jblotus]

no i haven't - i spent some time trying to get things to work with proxyquire but to no avail.

for me this is a blocker to using vue at all for work unfortunately

[jblotus]

Closing this. I migrated away from browserify to webpack 2 and I'm primarily using babel-plugin-rewire and sometimes imports-loader without issue.