Mock $refs

[charliekassel]

It would be useful to be able to mock $refs.

Currently, as far as I understand there is no way to test a method that calls a childs methods via $refs.

methodToTest ( ) {
  this.a = 1
  this.$refs.childComponent.childsMethod()
}
---
undefined is not an object (evaluating 'this.$refs.childComponent.childsMethod')

[Austio]

@charliekassel could you provide an example where you would want to use this functionality?

[charliekassel]

Perhaps it's actually stubbing rather than mocking.
For the example above where we have that method to test, I guess I would want the shallow constructor to stub that child method so it's not called, preventing the test throwing an error.
I want to test the logic contained in that methodToTest method without the side effects of calling $refs.childComponent.childsMethod()

[ddykhoff]

I have a component Approvals.vue utilizing the vue-toast library. I don't need to call the library methods when testing my component.

<template>
    <div>
        {{ someContent }}
    </div>
    <vue-toast ref='toast'></vue-toast>
</template>

<script>
import VueToast from 'vue-toast';

export default {
    props: ['someContent'],
    components: {
        'vue-toast': VueToast
    },
    methods: {
      showToast() {
          const toast = this.$refs.toast;
          toast.showToast(this.someContent);
      },
  },
    mounted () {
        this.$refs.toast.setOptions({
            maxToasts: 3,
            position: 'bottom right'
        });
    }
}
</script>

And my test

describe('Approvals page', () => {
    const wrapper = shallow(Approvals);

    it('any test', () => {
        expect(wrapper).toBeDefined();
    });
});

This throws the following error and fails the test:

TypeError: Cannot read property 'setOptions' of undefined

Stubbing $refs would allow be to test this component, as is I cannot test anything in the Approvals component due to this issue.

[LinusBorg]

Wouldn't that be solvable by stubbing the component that's being referenced?

messing with $refs means messing with the implementation of the component under test, which is not a good idea in my opinion.

[ddykhoff]

@LinusBorg shallow is already stubbing the referenced component so my example still stands. The issue appears to be that the $refs are not populated in testing like they are in production.

[eddyerburgh]

@ddykhoff can you post a code example of $refs not being populated correctly in vue-test-utils?

[ddykhoff]

@eddyerburgh My original comment in the issue has the example I am facing the issue with (#271 (comment)). Let me know if there is more info I can provide.

[ddykhoff]

@eddyerburgh I was trying to create a JSFiddle to show the issue but I'm not sure its possible to transpile within JSFiddle, or at least I don't know how. Thus vue-test-utils cannot be loaded properly.

https://jsfiddle.net/7kgkfrbu/1/

Uncaught ReferenceError: require is not defined

Should I open another issue for this? Being able to provide JSFiddles is useful for bug reproduction.

[eddyerburgh]

@ddykhoff There's an iife build that runs in browsers—https://github.com/vuejs/vue-test-utils/blob/dev/dist/vue-test-utils.iife.js. Once we've released we could add it to CDNJS. At the moment, your best bet is to copy the code from the iife into JSFiddle. You also need to include vueTemplateCompiler (https://cdn.jsdelivr.net/npm/vue-template-compiler@2.5.13/browser.js).

[ddykhoff]

@eddyerburgh I got it working in JSFiddle. You can use rawgit.com as a "CDN" for the iife build. Here is the bug repro you requested (child components methods not available in $refs).

https://jsfiddle.net/7kgkfrbu/6/

As you can see from the console output in the mounted callback, $refs is not populated.

[eddyerburgh]

Hi @ddykhoff, thanks for the fiddle.

The reason you can't call the method on the ref is because shallow stubs all the child components. The $refs object is still populated, but the toast component doesn't have any methods (because it's been stubbed).

You can use mount instead of shallow if you want to interact with a child components methods. Alternatively, you could use shallow and pass a custom stub:

const VueToastStub = {
  render: () => {},
  methods: {
  	setOptions: () => {}
  }
}

const wrapper = shallow(Approvals, {
  stubs: {
    'vue-toast': VueToastStub
  }
})

[LinusBorg]

So if that use case isn't one after all, I posit again: we don't have to mock refs, we can stub the components.

And we shouldn't either, because we create situations that are not possible in a real app.

[charliekassel]

@eddyerburgh I can confirm that the above technique worked for me and allowed me to test the parent method without error.

[ddykhoff]

@eddyerburgh Is there an issue with referencing the $refs in the mounted callback? Using your suggestion I still see the same error

https://jsfiddle.net/7kgkfrbu/7/