Testing globally registered components props about vue-test-utils HOT 5 CLOSED

import util from 'util';

export const RouterLinkStub = {
  name: 'router-link-stub',
  render(h) {
    return h(
      'router-link',
      {
        attrs: Object.keys(this._props).reduce((attrs, key) => {
          attrs[key] = util.inspect(this._props[key]);
          return attrs;
        }, {})
      },
      this.$slots.default
    );
  },
  props: ['to']
};

import { shallow } from 'vue-test-utils';
import { compileToFunctions } from 'vue-template-compiler';
import { createRenderer } from 'vue-server-renderer';
import GoHome from '@/components/GoHome.vue';
import { RouterLinkStub } from '../utils';

describe('GoHome.vue', () => {
  it('renders a router-link with a path', () => {
    const wrapper = shallow(GoHome, {
      stubs: { 'router-link': RouterLinkStub },
      propsData: { path: 'helloworld' },
      slots: { default: compileToFunctions('<div>Hello World</div>') }
    });

    // make sure the `to` attribute exists.
    expect(wrapper.element.getAttribute('to'));

    const renderer = createRenderer();
    renderer.renderToString(wrapper.vm, (err, str) => {
      if (err) throw new Error(err);
      expect(str).toMatchSnapshot();
    });
  });
});

import { mount, RouterLinkStub } from '@vue/test-utils'

const wrapper = mount(Component, {
  stubs: {
    RouterLink: RouterLinkStub
  }
})

wrapper.find(RouterLinkStub)

import { shallow } from 'vue-test-utils';
import { compileToFunctions } from 'vue-template-compiler';
import GoHome from '@/components/GoHome.vue';

describe('GoHome.vue', () => {
  it('displays default message', () => {
    const wrapper = shallow(GoHome, {
      stub: ['router-link'],
      propsData: { to: 'helloworld' },
      slots: { default: compileToFunctions('<div>Hello World</div>') }
    });
    var bar = wrapper.find('router-link').hasProp('to', 'helloworld');
    var foo = wrapper.find('router-link').vm.$attrs.to === 'helloworld';
    console.log('foobar', foo, bar);
  });
});