Vue-js-modal has errors when using Jest

[matewiszt]

Problem:

When I use the dynamic modal and I register it as a global component with Vue.use(VModal, {dynamic: true}), all my tests that contains a modal fail because of key.charAt is not a function error. I tried it also with createrLocalVue from vue-test-utils but it didn't help. If I comment out the VModal registration, all my tests pass.
...

Example & screenshots:

It is one of the failing tests:

import sinon from 'sinon'
import Vue from 'vue'
import Vuex from 'vuex'
import i18n from '@/localization'
import { mount } from '@vue/test-utils'
import filters from '@/filters'
import TemplateModal from '@/components/molecules/TemplateModal'
import LineSelect from '@/components/atoms/LineSelect'

Vue.use(Vuex)

describe('TemplateModal.vue', () => {
  let wrapper
  let getters
  let store
  let actions
  const template = {
    Name: 'Fancy template',
    Description: 'This is a fancy template',
  }

  beforeEach(() => {
    actions = {
      'protocol/addProtocol': jest.fn(),
      'tasks/getTaskListByStatus': jest.fn(),
      'status/setStatusMessage': jest.fn(),
      'protocol/fetchTasks': jest.fn()
    }
    getters = {
      'users/userList': () => {
        return [
          {
            UserId: 1,
            DisplayName: 'Admin'
          },
          {
            UserId: 2,
            DisplayName: 'Manager'
          }
        ]
      },
      'auth/loginData': () => {
        return {
          UserId: 1
        }
      }
    }

    store = new Vuex.Store({
      getters,
      actions
    })

    wrapper = mount(TemplateModal, {
      propsData: {
        template,
        position: 1
      },
      store,
      i18n
    })
  })

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

  it('TemplateModal should create as many starter options as many users we have and the options should have the correct data', () => {
    expect(wrapper.find('select[name="starter"]').findAll('option').length).toBe(getters['users/userList']().length)
    expect(wrapper.find('select[name="starter"]').find('option').text()).toBe(getters['users/userList']()[0].DisplayName)
    expect(wrapper.find('select[name="starter"]').find('option').element.value).toBe(getters['users/userList']()[0].UserId.toString())
  })

  it('TemplateModal has two LineSelect children', () => {
    expect(wrapper.findAll(LineSelect).length).toBe(2)
  })

  it('TemplateModal button click should trigger the corresponding handler method and the store action', () => {
    wrapper.find('.ca-template-modal__submit').trigger('click')
    expect(actions['protocol/addProtocol']).toBeCalled()
    const spy = sinon.stub(wrapper.vm, 'addTask').returns('called')
    wrapper.find('.ca-template-modal__submit').trigger('click')
    expect(wrapper.vm.addTask()).toEqual('called')
    spy.restore()
  })
})

It fails always when mounting the wrapper, the stacktrace is here:

TypeError: key.charAt is not a function

      52 |     })
      53 |
    > 54 |     wrapper = mount(TemplateModal, {
      55 |       propsData: {
      56 |         template,
      57 |         position: 1

      at Object.has (node_modules/vue/dist/vue.common.js:1932:50)
      at baseGetTag (node_modules/@vue/test-utils/dist/vue-test-utils.js:448:48)
      at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5047:15)
      at node_modules/@vue/test-utils/dist/vue-test-utils.js:5086:31
      at arrayEach (node_modules/@vue/test-utils/dist/vue-test-utils.js:4304:9)
      at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5080:3)
      at node_modules/@vue/test-utils/dist/vue-test-utils.js:5086:31
      at arrayEach (node_modules/@vue/test-utils/dist/vue-test-utils.js:4304:9)
      at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5080:3)
      at node_modules/@vue/test-utils/dist/vue-test-utils.js:5086:31
      at arrayEach (node_modules/@vue/test-utils/dist/vue-test-utils.js:4304:9)
      at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5080:3)
      at cloneDeep (node_modules/@vue/test-utils/dist/vue-test-utils.js:5116:10)
      at node_modules/@vue/test-utils/dist/vue-test-utils.js:5141:11
          at Array.forEach (<anonymous>)
      at createLocalVue (node_modules/@vue/test-utils/dist/vue-test-utils.js:5137:20)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5375:38)
      at Object.<anonymous> (test/unit/specs/molecules/TemplateModal.spec.js:54:15)

...

I have checked stackoverflow for solutions and 100% sure that issue not in my code.

[euvl]

TypeError: key.charAt is not a function

I don't think i use charAt anywhere

[matewiszt]

Yes, I know, in the stacktrace it complains about vue.common.js. I found also other developers who complained about this type of issue (see the last comment):
vuejs/vue-test-utils#312 (comment)

The consequence from the vue-test-utils team was that it is not their issue but the plugins used in a project. I tried to comment out all the plugins I use and the issue is gone only if I comment out your plugin. Anyway, it doesn't cause any issue during normal usage, just in testing. Do you have any idea what can be going on? Maybe I do something wrong?

[euvl]

Weird, soz, I have no idea what's happening

[helmerdx]

Same error, there is a way to add the modal like a component in my own .vue components?

[euvl]

You might trying copying the content of this repo or adding test coverage here :)

[BirdieSC]

Vue v2.5.17-beta.0 fixes the "key.charAt is not a function" error. However, the fundamental issue still exists (presumably in vue-js-modal somewhere still, as the error is only thrown when using vue-js-modal). The new error that gets thrown when using Vue v2.5.17-beta.0 is:

TypeError: Cannot convert a Symbol value to a string

This is thrown by vue.runtime.common.js when the hasHandler() tries to call warnNonPresent(). warnNonPresent() attempts to print key as a string, where key is Symbol(Symbol.toStringTag). hasHandler() is called by vue-test-utils when it tries to cloneDeep vue-js-modal. It attempts to call Symbol(Symbol.toStringTag)on vue-js-modal or a subcomponent. I am not entirely sure how to isolate the issue better.

[cristijora]

Having a similar issue with https://github.com/xkjyeah/vue-google-maps
"key.charAt is not a function"
Upgrading to Vue 2.5.17-beta.0 provides the same issue as @BirdieSC described.
This was working fine with vue-test-utils beta.12

[euvl]

Hmmm, can someone write the test or narrow down the example so I could look into it?
Or mb someone feels adventurous and can try to fix this?

[cristijora]

@euvl I don't feel like this is an issue with vue-js-modal, or vue material or vue2-google maps because they all cause this issue.
For the vue2-google-maps case my assumption is that it's because that library is distributed as raw .vue files and not transpiled down to js.
This is rather related to vue-test-utils since other versions didn't cause this issue

[euvl]

ah, thanks for clearing this out @cristijora 👍 😄

[andrewisaburden]

@cristijora vue-test-utils v1.0.0-beta.21 has a fix for this now, thought you might want to know.