Error with vue-test-utils

[matewiszt]

Sample code:

import Vuex from 'vuex'
import sinon from 'sinon'
import { createLocalVue, mount } from '@vue/test-utils'
import AttachmentCard from '@/components/atoms/AttachmentCard'
import { MdCard } from 'vue-material/dist/components'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(MdCard)

describe('AttachmentCard.vue', () => {

  let wrapper, store, actions
  const sampleAttachment = {
    Name: 'Sample attachment'
  }

  beforeEach(() => {
    actions = {
      'protocol/fetchAttachment': jest.fn()
    }

    store = new Vuex.Store({
      actions
    })

    wrapper = mount(AttachmentCard, {
      localVue,
      store,
      propsData: {
        attachment: sampleAttachment,
        protocolId: 1234,
        attachmentId: 56789
      }
    })
  })

  it('AttachmentCard should be a Vue instance and should have a div as root element with the class "ca-attachment"', () => {
    expect(wrapper.isVueInstance()).toBe(true)
    expect(wrapper.is('div')).toBe(true)
    expect(wrapper.classes()).toContain('ca-attachment')
  })

  it('AttachmentCard should contain the attachment\'s name', () => {
    expect(wrapper.find('.ca-attachment-card__text').text()).toContain(sampleAttachment.Name)
  })

  it('AttachmentCard should trigger the downloadattachment method on double click', () => {
    const spyDownload = sinon.stub(wrapper.vm, 'downloadAttachment').returns('downloaded')
    wrapper.find('.ca-attachment-card').trigger('dblclick')
    expect(wrapper.vm.downloadAttachment()).toEqual('downloaded')
    spyDownload.restore()
  })

  it('AttachmentCard should call the fetchAttachment method from the store on double click', () => {
    wrapper.find('.ca-attachment-card').trigger('dblclick')
    expect(actions['protocol/fetchAttachment']).toBeCalled()
  })

  it('AttachmentCard should contain and MdCard component', () => {
    expect(wrapper.find(MdCard).exists()).toBe(true)
  })
})

Steps to reproduce

1. Use https://github.com/vuejs-templates/webpack template with Vue-Material, using single-file-components.
2. Use Jest and vue-test-utils to test your application.
3. Write a test for a component which contains at least one Vue-Material component and run it.

Which browser?

Vue: "^2.5.16"
Vue-Material: "^1.0.0-beta-10.2"
No browsers affected because it is about unit testing.

What is expected?

The test doesn't throw an error but it gives a passing or a failing result.

What is actually happening?

[vue-test-utils]: wrapper.find() must be passed a valid CSS selector, Vue constructor, or valid find option object

      59 |
      60 |   it('AttachmentCard should contain and MdCard component', () => {
    > 61 |     expect(wrapper.find(MdCard).exists()).toBe(true)
      62 |   })
      63 | })
      64 |

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:11:9)
      at getSelectorTypeOrThrow (node_modules/@vue/test-utils/dist/vue-test-utils.js:2451:3)
      at find (node_modules/@vue/test-utils/dist/vue-test-utils.js:3165:22)
      at VueWrapper.find$$1 [as find] (node_modules/@vue/test-utils/dist/vue-test-utils.js:3474:15)
      at Object.<anonymous> (test/unit/specs/atoms/AttachmentCard.spec.js:61:20)

It seems that the methods of vue-test-utils (here it is the find() but it is valid also for any other methods like findAll, contains, classes, etc.) don't recognize the Material components.

[jeremyzahner]

@matewiszt I suppose that this happens because the MdCard component is actually created from a constructor and is not a "fresh" component.

The improvement to fully support extended components is still to be done.

vuejs/vue-test-utils#246

I suppose, that this also affects a case like this.

[matewiszt]

@jeremyzahner thank you for your answer.

VueMaterial still uses avoriaz which is the old version of vue-test-utils, that is why I thought that is is written in a compatible way. Now I updated my vue-test-utils version (primarily I used 1.0.0-beta.19, now 1.0.0-beta.24) but it still throws the error so we have to wait for this...

[Samuell1]

#1679